//利用JSONP实现搜索联想，当在搜索框中输入关键词时，会出现实时对应的联想词，这些联想词数据来自另一个域名http://suggestion.baidu.com/，因此可以利用JSONP实现跨域调用数据
window.onload = function ()
{
var oTxt = document.getElementById('baiduTxt');
var oUl = document.getElementById('baiduUl');
var oScript = null ;
oTxt.onkeyup = function()
{
oUl.innerHTML = '' ;
//避免造成代码冗余，出现众多script标签（由于每输入一个字符，就会动态生成script标签，因此每次需要清除上一次遗留下的script标签）
if(oScript)
{
document.body.removeChild(oScript);
}
oScript = document.createElement('script');
//其中‘wd’是搜索的关键字，‘cb’是一个回调函数，该回调函数是我们取到数据要后执行的函数，oScript.src中cb=baidu即表示取到数据后执行baidu函数
oScript.src = 'http://suggestion.baidu.com/su?wd='+oTxt.value+'&p=3&cb=baidu&from=superpage';
document.body.appendChild(oScript);
}
};
//回调时调用的函数，将取得的联想词展示出来
function baidu (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);
}
};
<body>
<div class="head clearfix">
<h1>
<a href="http://www.cnblogs.com/twobin/">twobin’
<span id="blog">blog</span>
</a>
</h1>
<span id="subtitle">疯狂的JSONP | 百度搜索联想</span>
</div>
<div id="warp">
<h2>百度搜索联想</h2>
<input type="text" id="baiduTxt" />
<ul id="baiduUl">
</ul>
</div>
</body>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
padding:0;
margin:0;
}
body{
font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
font-size:14px;
background:#f8f8f8;
}
a{
outline:none;
-moz-outline:none;
text-decoration:none;
}
.clearfix{
zoom:1;
_height:1px;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.head{
height:50px;
line-height:50px;
padding-left:200px;
border-bottom:1px solid #eee;
box-shadow: 1px 1px 5px #ccc;
background:#fff;
}
.head h1{
float:left;
width:200px;
height: 51px;
font-weight:bold;
font-size:24px;
background-color: rgb(31, 123, 155);
text-align: center;
}
.head h1 a{
color: #fff;
}
#blog{
font-weight:normal;
font-size:16px;
color: #fff;
}
#subtitle{
display:block;
float:right;
font-size:16px;
color:#999;
line-height:16px;
margin:20px 200px 0 0;
}
#warp{
width:200px;
height:100px;
margin:100px auto 0;
border: 1px solid #dddddd;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #b7b7b7;
background-color: white;
position: relative;
overflow: visible;
border-radius: 4px;
box-shadow: 0 1px 1px #d3d1d1;
}
h2{
margin-top:10px;text-align: center;
}
#baiduTxt{
width:150px;margin:25px;
}
li{
margin-left:50px;margin-right:20px;
}