一、原理
百度使用的jsonp接口，按照jsonp的方法即可实现百度搜索的功能。
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding: 0;
}
body{
padding: 50px;
}
input{
width: 300px;
}
ul{
width: 300px;
border: 1px solid #FF69B4;
display: none;
}
li{
list-style: none;
}
li a:hover{
color: hotpink;
}
</style>
</head>
<body>
<input type="text" id="q" />
<ul id="ul1"></ul>
<script type="text/javascript">
function baidudata(data){
var oUl=document.getElementById('ul1')
var html='';
if(data.s.length){
oUl.style.display = 'block';
for(var i=0;i<data.s.length;i++){
html+='<li><a href="https://www.baidu.com/s?&wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
}
oUl.innerHTML=html;
}else{
oUl.style.display='none'
}
}
window.onload=function(){
var oQ=document.getElementById('q')
var oUl=document.getElementById('ul1')
oQ.onkeyup=function(){
if(this.value !=""){
var oScript=document.createElement('script')
oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd='+this.value+'&cb=baidudata'
document.body.appendChild(oScript)
}else{
oUl.style.display='none'
}
}
}
</script>
</body>
</html>
三、总结
demo是之前写的，注释比较少，春节开工后写详细的注释，每一篇文章都会维护起来的，现在先实现功能，逻辑比较简单大家一看就懂。新年快乐。