先给大家展示下效果图：
下面一段代码给大家分享了百度搜索框智能提示案例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 = 'https://sp0.baidu.com/5a1fazu8aa54nxgko9wtanf6hhy/su?wd='+kd;
querysug(url);
});
});
function querysug(url){
document.getelementbyid('list').innerhtml = '';
$.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('fail');
}
});
}
</script>
</body>
</html>