百度搜索效果(jsonp法):
不需要放在服务器中,本地就可以执行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jsonp法</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #box { 500px; margin: 50px auto 0; } #ipt { 480px; height: 30px; padding: 0 8px; line-height: 30px; font-size: 18px; } #list { padding: 0 10px; background: #e3e3e3; } #list li { line-height: 26px; font-size: 16px; color: blue; } #list li:hover { background: #ccc; } </style> </head> <body> <div id="box"> <input type="text" name="ipt" id="ipt" value="" /> <ul id="list"> <!--<li>12306</li> <li>hao123</li>--> </ul> </div> <script src="ajax.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var ipt = document.getElementById('ipt'); var list = document.getElementById('list'); var Script = null; ipt.onkeyup = function() { if(Script) {//如果存在先移除 document.body.removeChild(Script); } Script = document.createElement('script'); Script.src = 'http://suggestion.baidu.com/su?wd=' + ipt.value+'&cb=mycallback&_='+new Date().getTime(); document.body.appendChild(Script); } function mycallback(json) { list.innerHTML = ''; for(var i = 0; i < json.s.length; i ++) { list.innerHTML += '<li>'+json.s[i]+'</li>' } } </script> </body> </html>