百度搜索框智能提示案例jsonp
2019/6/27 21:37:15
本文主要是介绍百度搜索框智能提示案例jsonp,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
先给大家展示下效果图:
下面一段代码给大家分享了百度搜索框智能提示案例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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南