![Uploading 楼层效果_023685.gif . . .]
###引入下拉提示数据
- 要模拟百度搜索的下拉提示，首先我们需要的就是百度搜索下拉框的借口：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=你&cb=baidu - 链接地址对应的信息就是一个调用的函数：
baidu({q:"你",p:false,s:["你到底有没有爱过我","你是我的小苹果","你是我的眼","你不知道的事","你懂的","你是男的我也爱","你好","逆战","你是我兄弟","你懂的网站"]});
- 通过调整链接中
?wd=之后的关键词，我们可以获得其他的搜索提示。 - 修改
&cb=之后的内容,可以更换调用的函数名。 - 根据这些，我们可以将这个链接通过
<script>的src属性来引入;即这个调用的函数为html的一部分。 - 最后，只要我们创建对应的函数，就可以使用里面的数据;
###JSONP
这种引入数据的方式，我们称为jsonp[json with padding]。一个非官方的协议，通过javascript callback的形式，实现跨域访问。
- 跨域
为什么会出现跨域？因为浏览器的
【同源策略】。 - 同源策略
【同源策略】是浏览器的一种约定，它是浏览器的核心，也是最基本的安全功能。- 它规定了浏览器在
不同端口、不同协议、不同域名等多种情况下不能互相通信，即一个域名只能获取自身域名下的信息。
- 解决跨域的方式：
除了jsonp之外，还可以让
后端代理（因为后端不存在跨域）以及flash+xml的方式。
####还有几点需要注意的是
- 我们使用的键盘弹起事件，每次弹起时都会创建一个
<script>，这就需要我们将这些节点都删除。 - 输入框以及数据不为空时，我们才将得到的数据用字符串拼接的方式输入到html页面中。
可能是只有下拉的数据请求的缘故，感觉速度比百度的快许多
最后奉上页面源码：（以上仅是分享，如有任何问题，请告知删除）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>百度好几下,你才知道!</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
ol, ul, li {
list-style: none;
}
body{font-family:'microsoft yahei';overflow:hidden;}
#baidu{margin:0 auto;width:641px;position: relative;min-height:293px;}
#baidu .logo{text-align: center;position:absolute;bottom:40px;width:100%;height: 181px;}
#baidu .logo img{margin:33px auto 0 auto;}
#baidu form{position:absolute;bottom:0;}
#baidu input{float: left;outline:none;}
#baidu .search{width:535px;height:40px;padding:0 10px;font-size:14px;border:1px solid #ccc;box-sizing:border-box;}
#baidu .hover{border:1px solid #999;}
#baidu .focus{border:1px solid #38f;}
#baidu .btn{width: 102px;height: 40px;border:0;background:#3388FF;color:#fff;font-size:14px;cursor:pointer;}
#baidu ul{width:535px;border:1px solid #999;font-size:12px;box-sizing:border-box;display: none;position:absolute;top:39px;}
#baidu ul li{}
#baidu ul li a{display: block;text-decoration:none;color:#333;padding:5px 10px;}
#baidu ul li a:hover{background:#eee;}
</style>
</head>
<body>
<div id="baidu">
<div class="logo">
</div>
<form>
<input type="text" class="search">
<input type="button" value="百度好几下" class="btn">
<ul id="select">
</ul>
</form>
</div>
<script>
var oBaidu=document.getElementById('baidu');
var oSearch=oBaidu.getElementsByTagName('input')[0];
var oBtn=oBaidu.getElementsByTagName('input')[1];
var oUl=document.getElementById('select');
function baidu(data){
var str='';
if(oSearch.value!='' && data.s.length!=0){
//输入框以及数据不为空时执行。
for (var i = 0; i < data.s.length; i++) {
str+='<li><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd='+data.s[i]+'">'+data.s[i]+'</a></li>';
};
oUl.innerHTML=str;
oUl.style.display='block';
var aLi=oUl.getElementsByTagName('li');
tab(aLi,data.s.length)
}else{
oUl.style.display='none';
}
}
oSearch.onmouseover=function(){
oSearch.className='search hover';
}
oSearch.onmouseout=function(){
oSearch.className='search';
}
oSearch.onfocus=function(){
oSearch.style.border='1px solid #38f';
if(oSearch.value!=''){
oUl.style.display='block';
}
}
document.onclick=function(){
oSearch.style.border='';
oUl.style.display='none';
}
oSearch.onclick=function(ev){
var ev=ev||window.event;
ev.cancelBubble=true;
}
oSearch.onkeyup=function(ev){
var oScript=document.createElement('script');
oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+oSearch.value+'&cb=baidu';
document.body.appendChild(oScript);
var aScript=document.getElementsByTagName('script');
for (var i = 0; i < aScript.length; i++) {
//删除之前创建的全部script节点;
document.body.removeChild(aScript[i]);
};
var ev=ev||window.event;
if(ev.keyCode==13){//输入框回车搜索;
oBtn.onclick();
};
}
oBtn.onclick=function(){//点击搜索;
location.href='https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd='+oSearch.value;
}
oSearch.focus();//默认输入框选中;
</script>
</body>
</html>
