先给大家展示下效果图：
下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识，具体代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度下拉_sug-jquery</title> <script src="https://www.jb51.net/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> <div> <input type="text" autocomplete=off> <input type="button" value="百度一下"> </div> </div> <div> </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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: