jquery中用jsonp实现搜索框功能
前面的话:
在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面)。今天想彻底把这个问题搞明白。
用jquery和ajax进行初步的尝试:
(本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频。自己之前的代码找不到了,之前最先的想法也是来自那里,所以这次直接用那里的代码)
html代码:
<div class="bg-div"> <div class="search-box"> <div class="logo"></div> <form id="search-form"> <input type="text" class="search-input-text" autocomplete="off" name="q" id="search_input" /> <input type="submit" class="search-input-button" value="" id="search_submit"> </form> </div> </div> <div class="suggest" id="search-suggest" <!--style="display:none;"-->> <ul id="search-result"> <li>搜索结果1</li> <li>搜索结果2</li> </ul> </div>
css代码:
* { padding: 0; margin: 0; } body { } .bg-div{ background-image: url('images/river.jpg'); width: 1228px; height: 690px; margin: 0 auto; position: relative; } .logo { background-image: url('images/logo.png'); width: 107px; height: 53px; float: left; margin: -4px 18px 0 0; } form { float: left; background-color: #fff; padding: 5px; } .search-input-text { border: 0; float: left; height: 25px; line-height: 25px; outline: none; width: 350px; font-size: 16px; } .search-input-button { border: 0; background-image: url('images/search-button.png'); width: 29px; height: 29px; float: left; } .search-box { position: absolute; top: 200px; left: 300px; } #search-suggest { width: 388px; background-color: #fff; border: 1px solid #999; display: none; } .suggest ul { list-style: none; } .suggest ul li { padding: 3px; font-size: 14px; line-height: 25px; cursor: pointer;/*手型*/ /*这段代码去掉 position:absolute; left:----px; top:----px; */ } .suggest ul li:hover { text-decoration: underline; background-color: #e5e5e5; }
用jquery来实现效果:
在这之前,我们基本上得到了我们想要的图形效果,但是我们在搜索框内输入想要查询的内容这时候是不会有效果的(一般的搜索框效果都是在键盘输入的时候,下面会显示一部分与之关联的关键搜索信息,然后鼠标移动上去点击后会跳到相应链接)。为了一步步验证我们的思路,我们这里修改一下之前的代码。
1、将li标签中的定位去掉;
2、在html中将li标签设置为隐藏。然后我们进行后面的操作。
思考一:如何在键盘输入的时候就显示相关信息(即:li标签中的内容)?
思路:我们先引入jquery,然后文档加载完后执行一个键盘事件,然后在键盘事件中改变相应的css效果
$(function() { //键盘事件 $("#search_input").bind("keyup", function() { $("#search-suggest").show().css({ top : $("#search-form").offset().top + $("#search-form").height()+10, left : $("#search-form").offset().left, position : "absolute", }); }); });
这时候,我们在搜索框中输入内容时,下面会跟着显示对应的搜索(模拟)
思考二:如何实现鼠标点击搜索按钮的时候,会搜索相应的内容?
思路:用鼠标点击事件,让鼠标点击后设置一个地址,点击后直接跳到相应地址,代码实现:
//事件代理 --》鼠标点击事件 $(document).delegate("li", "click", function() { var keyword = $(this).text(); location.href = "http://cn.bing.com/search?q=" + keyword; });
思考三:我们如何在搜索框输入数据时,下面会提示相关搜素信息?
思路:我们我们用jquery中的get去实现,参考代码:
var searchText = $("#search_input").val(); $.get( "http://api.bing.com/qsonhs.aspx?q="+searchText , function(data) { console.log(data); var d = data.AS.Results[0].Suggests; var html = ""; for(var i = 0; i < d.length; i++) { html += "<li>"+d[i].Txt+"</li>"; } $("#search-result").html(html); } , "json");
到这里,按理来说我们这里应该可以得到我们想要的结果了,但是,找了好久都没有发现哪里错了。视频里面接着描述了用JSONP来进行跨域操作,但是我也按视频中的操作,始终得不到我想要的结果,于是我埋头去看《javascript高级程序设计》,去找关于jsonp的用法
关于jsonp:
关于jsonp,《javascript高级程序设计》一书中介绍的比较少,下面是我看了之后的归纳。
jsonp的全写是 json with padding,其出现是为了解决各主浏览器的之间的同源策略的问题,一般来说ServerA 域下面的页面是没有办法与非 ServerA 下面的资源进行沟通,而 Html 的<script>元素是个例外,利用 <script> 这个开源策略,网页可以从其他来源动态获取 json数据,而这种模式就是所谓的 JSONP,用 jsonp 抓到并不是真正意义上 的 json 而是任意的 javascript ,它是直接通过 javascript 编译器编译而不是 json 解释器。更多关于json的知识请点击:http://www.cnblogs.com/foodoir/p/5894760.html查看
既然书上没有写,那就去网上搜索资源。这里截取一段和文章前面有关的信息的代码:
$.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){ alert(json.price + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } });
通过这段代码来修改我们自己的代码:
$.ajax({ type: "GET", url: "http://api.bing.com/qsonhs.aspx?type=cb&q=" + searchText, dataType: "jsonp", jsonp: 'cb', success: function(data) { var d = data.AS.Results[0].Suggests; var html = ""; for(var i = 0; i < d.length; i++) { html += "<li>" + d[i].Txt + "</li>"; } $("#search-result").html(html); $("#search-suggest").show().css({ top: $("#search-form").offset().top + $("#search-form").height() + 10, left: $("#search-form").offset().left, position: "absolute", }); } })
更多思考:我们可以在前面增加一些判断,让我们的效果实现起来更完美
if(data == null) { $("#search-suggest").hide(); return false; } if(data.AS == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results[0] == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results[0].Suggests == null) { $("#search-suggest").hide(); return false; }
经过测试前面的代码,发现还有不足,进一步修改代码:
$("#search-form").submit(function() { var keyword = $("#search_input").val(); console.log("word=" + keyword); //if (keyword == null) {return false;} location.href = "http://cn.bing.com/search?q=" + keyword; });
到这里,我们的效果差不多就出来了,效果截图:
源代码已托管至:http://sandbox.runjs.cn/show/gfdpkysk,点击即可查看。
后面的话:
这些天学习的新东西挺多的,现在有一个想法就是把最近学的东西把它串联起来,做一个综合的效果。参考必应网站,真的有好多东西已经可以做出来了,接下来的一段时间就好好的把自己想要做的效果实现好。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
- 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图...2015-10-30
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23- jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效,分享给大家,具体如下效果图:具体代码如下:html代码: <section class="strips"> <article class="strips__strip"> <di...2015-11-24
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31- jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自...2015-10-30
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13- 在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的....2016-04-27
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按...2015-10-23