百度搜索效果（jsonp法）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

百度搜索效果（jsonp法）：

不需要放在服务器中，本地就可以执行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonp法</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 500px;
margin: 50px auto 0;
}
#ipt {
width: 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">

</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>