Ajax 模拟百度下拉提示框
百度搜索地址栏提交:https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7525&req=2&csor=3&pwd=sd
百度提交的键名:wd=
步骤:
- 每次输入获取内容
- 调用ajax 请求百度数据
- 遍历返回的数据 创建li 拼接li
*{
margin:0;
padding:0;
}
html,body{
width:1001%;
height:100%;
}
#box{
width:70%;
margin:0 auto;
}
#lg,#search{
width:100%;
position:relative;
}
#lg,img{
text-align:center;
}
#inp,#btn{
outlin:none;
border:none;
vertical-align:top;
}
#inp{
margin-left:15%;
width:55%;
height:16px;
padding:12px 16px;
font-size:16px;
border-radius:10px 0 0 10px;
border:2px solod #c4c7ce;
}
#btn{
cursor:pointer;
width:15%;
height:44px;
line-height:45px;
background-color:#4e6ef2;
border-radius:0 10px 10px 0;
font-size:17px;
color:#fff;
box-shadow:none;
font-weight:400;
}
#btn:hover{
background-color: #2d78f4;
}
ul{
list-style:none;
width:55%;
padding:12px 16px;
font-size:16px;
border-radius:0 0 10px 10px;
display:none;
border:2px solid #4e6ef2;
margin-top:-2px;
margin-left:15%;
}
ul>li{
height:35px;
line-height:35px;
text-indent:9px;
cursor:pointer;
color:black;
font-size:14px;
}
ul>li:hover{
background-color:#ccc;
}
<div id=#box>
<div id=lg>
<img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" height="129">
</div>
<div id="search">
<!--禁用浏览器输入框的 自动补全-->
<form action="https://www.baidu.com/s?rsv_spt=1&rsv_iqid=0xfff0e80200228169&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=7&rsv_sug1=6&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&inputT=1073&rsv_sug4=1519">
<input autocompele="off" type="text" name="wd" id="inp"><button>百度一下</button>
<ul id="resultList"></ul>
</form>
</div>
</div>
<script src="jquery-1.11.1.js"></script>
<script>
var maxResultList=5;
$(function(){
//同时给当前输入框添加输入事件和获取焦点事件
//这两个事件做的事情是一样的
$("#inp").parent().on("input focus","#inp",function(){
var val=$(this).val();
//这个接口无法搜索a和b字母;
if(val=="a" || val=="b" ||val==""){
//输入框为空有两种情况1.刚获取焦点还未输入;2.删除干净了
$("#resultList").hide();
return;
}
$.ajax({
url:"https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7525&req=2&csor=3&pwd=sd",
dataType:"jsonp",
jsonp:"cb",
data:{
wa:val
},
success:function(data){
//console.log(data);
var arr=data.g;
//如果没有arr则不继续遍历了
if(!arr){
//表示本次请求没有数据
$("#resulList").hide();
return;
}
//先把ul显示出来
//每次触发success表示有新的一些结果 那么就需要把之前的结果清空
$("#resultList").empty().show();
//规定最多遍历几次
for(var i=0;i<maxResultList;i++){
$("#resultList")append("<li>"+arr[i].q+"</li>")
}
}
})
})
//自带事件委托的绑定事件
$("#resultList").on("mousedown","li",function(){
//alert("li的鼠标按下了!");
//把li的内容放入输入框里面
$("#inp").val($(this).html());
//并且把ul隐藏
$("#resultList).hide();
})
//输入框失去焦点 隐藏ul
$("#inp").blur(function(){
//alert("输入框失去焦点了!");
$("#resultList").hide();
//这个失去焦点带来一个问题 会使li的点击事件获取内容失效
//因为一旦鼠标刚刚按下则触发了失去焦点 li就隐藏了 点击事件就再也无法获取了
//解决:把li的click修改成mousedown就可以了
})
})
</script>