<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//其实说白了，就是利用src属性来加载动态拼接的js地址，而这段js代码会回调本地写好的其他js代码
//event
window.onload = function(){
var oTxt = document.getElementById('baiduTxt');
var oUl = document.getElementById('baiduUl');
var oScript = null;
//当输入完成，抬起按键的时候就重新加载这段script到dom中
oTxt.onkeyup = function(){
oUl.innerHTML = '';
if(oScript){
document.body.removeChild(oScript);
}
oScript = document.createElement('script');
//该url返回的是一个对json函数的调用： jsonp(json) ，加载的结果就是该文本格式的函数调用被执行
oScript.src = 'http://suggestion.baidu.com/su?wd='
+oTxt.value
+'&cb=jsonp';
document.body.appendChild(oScript);
}
}
//callback function,json with padding
function jsonp(json){
var oUl = document.getElementById('baiduUl');
for(var i=0;i<json['s'].length;i++){
var oLi = document.createElement('li');
oLi.innerHTML = json['s'][i]
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<h2>Baidu Suggestion</h2>
<input type="text" id="baiduTxt"/>
<ul id="baiduUl"></ul>
</body>
</html>