代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="Anthor" content="" />
<title>Title</title>
<style>
*{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
li{ list-style-type: none;}
#box{
width: 400px;
margin: 100px auto;
}
#inp{
display: block;
width: 396px;
height: 40px;
text-indent: 10px;
}
#list{
border: 1px solid #bbb;
border-top: none;
box-shadow: 1px 1px 2px #999;
}
#list li{
height: 30px;
line-height: 30px;
text-indent: 10px;
}
#list li a{
display: block;
height: 100%;
text-decoration: none;
color: #333;
font-size: 14px;
cursor: default;
}
#list li a:hover,#list li a.active{
background: #ddd;
}
</style>
</head>
<body>
<div id="box">
<input id="inp" type="text" />
<ul id="list">
<!-- <li><a href="">aaaa</a></li>
<li><a href="">aaaaa</a></li>-->
</ul>
</div>
<script>
var oInp = document.getElementById("inp"),
oList = document.getElementById("list");
//事件,當input表單內容發生的改變的時候觸發
oInp.oninput = eFn;
oInp.onfocus = function (ev) {
eFn.call(this);
this.sVal = this.value;
this.index = 0;
};
oInp.onblur = function () {
setTimeout(function () {
oList.innerHTML = "";
},200);
};
oInp.onkeyup = function (ev) {
ev = ev || window.event;
var keyCode = ev.keyCode;
var val = this.value;
if ( val ){
if ( keyCode !== 40 && keyCode !== 38 ){
this.sVal = val;
this.index = 0;
}
if ( keyCode === 13 ){
window.location.href = "https://www.baidu.com/s?wd="+val;
this.blur();
}else if ( keyCode === 38 || keyCode === 40 ){
UpOrDown.call(this,keyCode);
ev.preventDefault && ev.preventDefault();
return false;
}
}
};
//上下按鍵的事件處理
function UpOrDown(keyCode){
var aLi = oList.children;
var length = aLi.length;
for (var i = 0; i < length; i++) {
aLi[i].children[0].className = "";
}
if ( keyCode === 38 ){
this.index --;
if(this.index<0)this.index=length;
}else{
this.index ++;
this.index %= length+1;
}
if ( this.index ){
this.value = aLi[this.index-1].children[0].innerHTML;
aLi[this.index-1].children[0].className = "active";
}else{
this.value = this.sVal;
}
}
//請求jsonp的事件函數
function eFn() {
var val = this.value;
if ( val ){
//要加載這一段js,也就是要創建一個script標籤!!
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= &cb=gd
//清除前一個
var dom = document.getElementById("PAOPAO_JSONP");
if ( dom )document.body.removeChild(dom);
//再創建當前的
var oS = document.createElement("script");
oS.id = "PAOPAO_JSONP";
oS.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=paopao";
document.body.appendChild(oS);
}else{
oList.innerHTML = "";
}
}
//接收處理的函數
function paopao( msg ) {
//清理ul內容
oList.innerHTML = "";
//獲取jsonp傳參裏面的數據
var data = msg.s;
//遍歷生成LI,並放入UL
for (var i = 0,length=data.length; i < length; i++) {
var wd = data[i];
var oLi = document.createElement("li");
oLi.innerHTML = "<a target='_blank' href='https://www.baidu.com/s?wd="+wd+"'>"+wd+"</a>";
//實現點擊聯想詞之後輸入框內容的改變
oLi.onclick = function () {
oInp.value = this.children[0].innerHTML;
};
oList.appendChild( oLi );
}
}
</script>
</body>
</html>
效果圖如下:
ajax
返回的是json類型的字符串,可以轉換成json進行數據處理
jsonp
沒有跨域問題
相當於訪問了一個JS文件地址