大家快瞧那结冰的湖水，春风一吹冰都融化了，河里的小鱼都游出海面，在湖水中自由的游来游去，多可爱的小鱼啊！多么欢快的小鱼啊！真是让人深深的为它那可爱的摸样着迷。春风一吹过那枯黄的小草身边时，小草突然边了摸样，它从原来的枯黄变成了嫩绿，慢慢地小草从嫩绿变成了鲜绿渐渐地越变越绿，绿的让人难以相信那是小草。啊！小草我为你的样子感到是个奇迹。
先给大家展示下效果图：
下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识，具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<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>
以上所述是小编给大家介绍的百度搜索框智能提示案例jsonp，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
本文百度搜索框智能提示案例jsonp到此结束。在生活我们不是走向成功就是走向失败，不是走向光明就是奔向黑暗，不是飞进天堂就是掉进深渊，获得不了幸福就会感到痛楚。小编再次感谢大家对我们的支持！