這個功能的實作主要使用了jsonp跨域存取, 然後透過回呼函數來將搜尋到的關聯內容顯示出來 。
JSONP(JSONwith Padding)是一個非官方的協議，它允許在伺服器端整合Script tags返回到客戶端，透過javascript callback的形式實現跨域存取（這僅僅是JSONP簡單的實作形式）。
回呼函數：當一個函數作為另一個函數的參數時，那麼這個函數就是回呼函數。
效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wei{
width:500px;
height:600px;
border:0px solid gray;
position: relative;
margin: 300px auto;
}
#text{
width:476px;
height:50px;
line-height: 50px;
padding-left:20px;
font-size: 16px;
position: absolute;
}
#list{
height:auto;
border:1px solid #ccc;
display: none;
position: absolute;
top: 53px;
}
#wei ul li{
width:498px;
height:30px;
line-height: 30px;
text-indent:10px;
font-size: 16px;
list-style: none;
color: #000;
}
#wei ul li a{
text-decoration:none;
color: #000;
}
#wei ul li:hover{
display:block;
background:#ccc;
color:#fff;
}
#btn{
width: 80px;
height: 54px;
background: deepskyblue;
outline: none;
border: 0;
position: absolute;
left: 500px;
color: #fff;
}
p{
height: 58px;
}
</style>
</head>
<body ng-controller="show">
<p id="wei">
<p>
<input type="text" id="text">
<input type="button" name="btn" id="btn" value="百度一下" />
</p>
<ul id="list"></ul>
</p>
<script type="text/javascript">
var txt = document.getElementById("text");
var oUl = document.getElementById("list");
var oBtn = document.getElementById("btn");
txt.onkeyup = function(){
oUl.innerHTML = "";
var val = txt.value;
var oScript = document.createElement("script");//动态创建script标签
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback";
//添加链接及回调函数
document.body.appendChild(oScript);//添加script标签
document.body.removeChild(oScript);//删除script标签
}
//回调函数
function callback(data){
data.s.forEach(function(value){
var oLi = document.createElement("li");
oLi.innerHTML = "<a href=\"https://www.baidu.com/s?wd="+ value + "\">"+ value + "</a>";
oUl.appendChild(oLi);
})
oUl.style.display = "block";
}
//点击跳转到百度页面，并搜索其中内容
oBtn.onclick = function(){
var val = txt.value;
location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3";
}
</script>
</body>
</html>以上是如何用Js實現百度搜尋框提示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
