此案例使用的时ajax技术实现百度下拉，其中有利用jsonp解决跨域的问题，目前刚接触到ajax技术，在这里分享记录一下学习的痕迹！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EMS-jquery查询</title>
<style type="text/css">
#sug{
position: absolute;
left: 50%;
margin-left: -150px;
300px;
background: lightGreen;
height: 40px;
text-align: center;
}
#sug input{
margin-top: 10px;
}
#list{
position: absolute;
left: 50%;
top:50px;
200px;
margin-left: -150px;
height: auto;
background: lightBlue;
display: none;
}
#list ul{
padding-left: 0px;
margin: 0px;
}
#list ul li{
background: lightGray;
line-height: 30px;
list-style: none;
padding-left: 10px;
margin-top: 0px;
cursor: pointer;
}
#list ul li.on{
background: lightGreen;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="sug">
<div>
<input type="text" id="keyWord" autocomplete=off>
<input type="button" value="百度一下" id="btn">
</div>
</div>
<div id="list"></div>
<script type="text/javascript">
$(function(){
//键盘抬起时触发的动作
$("#keyWord").keyup(function(){
//获取到输入框的值
var kw = $("#keyWord").val();
//发送请求的地址
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + kw;
//请求到的函数
querySUG(url);
});
function querySUG(url){
document.getElementById('list').innerHTML = " ";
$('#list').html = '';
//使用ajax获取到请求
$.ajax({
type:'get',
url:url,
dataType:'jsonp',
async: true,
jsonp:'cb',
success:function(data){
//遍历得到的数据数组
var ul = $("<ul></ul>");
for(var i = 0; i < data.s.length; i++){
//得到每一项数据
var li = $('<li></li>').append(data.s[i]);
$(ul).append(li);
}
$("#list").append(ul).show();
$('#list').find('li').mouseover(function(){
$(this).css('background-color','lightGreen')
.siblings().css('background-color','lightGray');
});
$("#list").mouseleave(function(){
$('#list').hide();
});
},error:function(){
console.log('faile');
}
})
}
})
</script>
</body>
</html>