如何用Js实现百度搜索框提示功能

来源：六三科技网

这个功能的实现主要使用了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实现百度搜索框提示功能