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

2019-11-19 18:47:25

字体：大中小

来源：转载

供稿：网友

先给大家展示下效果图：

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

上一篇：js拖拽功能实现代码解析

下一篇：JS函数多个参数默认值指定方法分析