百度下拉智能搜索提示
阿新 • • 發佈：2018-03-21
true 記錄 off btn data 百度 rip script tle
此案例使用的時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;
width: 300px;
background: lightGreen;
height: 40px;
text-align: center;
}
#sug input{
margin-top: 10px;
}
#list{
position: absolute;
left: 50%;
top:50px;
width: 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){
$(‘#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‘).hover(function(){
$(this).css(‘background‘,‘lightGreen‘);
},function(){
$(this).css(‘background‘,‘lightGray‘);
});
},error:function(){
console.log(‘faile‘);
}
})
}
})
</script>
</body>
</html>
百度下拉智能搜索提示