百度搜索框智能提示案例jsonp
更新时间:2016年11月28日 14:14:28 作者:python基础教程
这篇文章主要介绍了百度搜索框智能提示案例jsonp的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
先给大家展示下效果图:
下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识,具体代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度下拉_sug-jquery</title> <script src="http://9i0i.com/pic.php?p=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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!
相关文章
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图2016-04-04手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
这篇文章主要介绍了手写的一个兼容各种浏览器的javascript getStyle函数,用来取元素的样式,需要的朋友可以参考下2014-06-06原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
下面小编就为大家带来一篇原生JS实现风箱式demo,并封装了一个运动框架(实例代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论