cari

Rumah  >  Artikel  >  hujung hadapan web  >  百度搜索框智能提示案例jsonp

百度搜索框智能提示案例jsonp

高洛峰
高洛峰asal
2016-12-03 16:07:011492semak imbas

先给大家展示下效果图：

22.png

下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度下拉_sug-jquery</title>
<script src="jquery-1.11.3.js"></script>
<style>
#sug{
position: absolute;
left: 50%;
margin-left: -150px;
margin-top: 200px;
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;
margin-top: 200px;
height: auto;
background: lightBlue;
}
#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>
</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>
$(function(){
$("#keyWord").keyup(function(e){
var kd = $("#keyWord").val();
var url = &#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&#39;+kd;
querySUG(url);
});
});
function querySUG(url){
document.getElementById(&#39;list&#39;).innerHTML = &#39;&#39;;
$.ajax({
type : "get",
async: true,
url : url,
dataType : "jsonp",
jsonp: "cb",
jsonpCallback:"callback",
success : function(data){
var ul = $("<ul></ul>");
$.each(data.s,function(i,element){
var e = $("<li></li>").append(element);
$(ul).append(e);
});
$("#list").append(ul);
},
error:function(){
console.log(&#39;fail&#39;);
}
});
}
</script>
</body>
</html>


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js拖拽功能实现代码解析Artikel seterusnya：JS函数多个参数默认值指定方法分析

Artikel berkaitan

Lihat lagi