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

时间：2021-05-18

先给大家展示下效果图：

下面一段代码给大家分享了百度搜索框智能提示案例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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章