在jquery中用jsonp实现搜索框功能

时间：2021-09-15 来源：互联网编辑：宝哥软件园浏览：次

之前的话：上周想发一个模仿必应搜索的界面。但是在准备写文章之前，我突然想到，我已经学会了ajax技术。在这里，我还为我的页面提供了一种无需手动刷新即可获取数据的方法。但是发现我想要的结果是以前的方法得不到的。但是前几天电脑换了系统，失去了之前的源代码(我面前有个坏习惯，就是把最近在做的事情放在桌面上)。今天我想彻底了解这个问题。

使用jquery和ajax进行初步尝试：

(此代码指海量开放在线课程。搜索框用于制作视频。详情请参考视频。之前的代码找不到了，第一个想法就是从那里来的，所以这次直接用那里的代码。)

Html代码：

div class=' BG-div ' div class=' search-box ' div class=' logo '/div form id=' search-form '输入类型=' text ' class=' search-input-text '自动完成='off '名称='q' id='search_input' /输入类型=' submit ' class=' search-input-button '值=' id=' search _ submit '/form/div/div class=' advise ' id=' search-advise '！-style=' display : none；'-ul id=' search-result ' Li搜索结果1/Li Li搜索结果2/li /ul /div css代码：

* { padd : 0；margin : 0；} body { }。BG-div { background-image : URL(' images/river . jpg ')；宽度： 1228 px；高度： 690 px；margin: 0 auto相对位置：} .徽标{ background-image : URL(' images/logo . png ')；宽度： 107像素；height: 53px向左浮动：margin :-4px 18px 0 0；}表单{ float: left背景-color : # fff；padding: 5px} .搜索-输入-文本{ border : 0；向左浮动：高度： 25px；线高： 25px；outline:无；宽度： 350 px；font-size : 16px；} .搜索-输入-按钮{ border : 0；background-image : URL(' images/search-button . png ')；宽度： 29px；高度： 29px；向左浮动：} .搜索框{ position:绝对值；top: 200pxleft: 300px} #搜索-建议{ width: 388px背景-color : # fff；border: 1px固体# 999；display:无；} .建议ul { list-style : none；} .建议ul li { padding: 3pxfont-size : 14px；线高： 25px；cursor:指针；/*手型*//*此代码删除位置position:absoluteleft :-px；top :-px；*/} .建议ul Li : hover { text-decoration :下划线；背景-color : # e5e5e 5；}使用jquery实现效果：在此之前，我们基本上得到了想要的图形效果，但是当我们在搜索框中输入想要查询的内容时，就没有效果了(一般的搜索框效果是在键盘输入的时候，下面会显示一些与之关联的关键搜索信息，然后鼠标会上移点击跳转到对应的链接)。为了一步步验证我们的想法，我们在这里修改了前面的代码。

1.移除li标签中的定位；

2.将li标签设置为隐藏在html中。然后我们继续下面的操作。

思路一：在键盘上打字时，如何显示相关信息(即li标签中的内容)？

想法：我们首先引入jquery，然后在文档加载后执行一个键盘事件，然后在键盘事件中改变相应的css效果

$(function() {//键盘事件$('#search_input '))。bind('keyup '，function(){ $(' # search-advise ')。显示()。css({ top : $('#search-form ')。偏移量()。top $(“# search-form”)。height() 10，left : $('#search-form ')。偏移量()。左，位置： '绝对'，})；});});这时，当我们在搜索框中输入内容时，相应的搜索(模拟)将显示在下面

思路二：如何实现鼠标点击搜索按钮，就会搜索到相应的内容？

想法：用鼠标点击事件，点击后设置一个地址，点击后直接跳转到对应的地址。代码是这样实现的：

//事件代理-“单击事件$(文档)。委托(' Li '，' click '，function () {var关键字=$ (this)。text()；location . href=' http://cn . bing.com/search？q='关键字；});思路三：我们在搜索框输入数据时，会在下面提示相关的搜索信息。想法：我们，我们使用jquery中的get来实现它，参考代码：

var searchText=$('#search_input ')。val()；$.get(' http://API . bing.com/qsonhs . aspx？q=' searchText，函数(数据){ console.log(数据)；var d=数据。结果[0]。建议；var html=for(var I=0；身份证长度；i ) { html='li' d[i]。txt '/Li '；} $(' #搜索结果')。html(html)；}，' JSON ')；在这里，我们应该可以得到我们想要的结果，但是我们搜索了很久也没有发现任何问题。视频随后用jsonp描述了跨域操作，但根据视频中的操作还是得不到我想要的结果，于是就把头埋在《javascript高级程序设计》里，想搞清楚JSONP的用法

关于jsonp:关于jsonp的书，《javascript高级程序设计》，介绍的比较少，下面是我看完之后的总结。jsonp的整个编写都是带填充的json，这似乎解决了主要浏览器之间的对应策略问题。一般来说，ServerA域下的页面是没有办法和非ServerA域下的资源进行通信的，Html的脚本元素是个例外。借助脚本的开源策略，Web页面可以从其他来源动态获取json数据，这种模式称为jsonp。你用jsonP捕捉到的是任意的javascript而不是json，JSON是由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 3360 ' flighthandler '，//用户自定义jsonp回调函数名，jQuery会自动处理数据成功：函数(JSON) {alert (JSON。priceJSON。门票。' );}，error : function(){ alert(' fail ')；} });通过此代码修改我们自己的代码：

$.ajax({ type: 'GET '，URL : ' http://API . bing.com/qsonhs . aspx？type=cbq=' searchText '，dataType: 'jsonp '，jsonp: 'cb '，success:函数(数据){ var d=data。结果[0]。建议；var html=for(var I=0；身份证长度；i ) { html='li' d[i]。txt '/Li '；} $(' #搜索结果')。html(html)；$(' #搜索-建议')。显示()。css({ top: $('#search-form ')。偏移量()。top $(“# search-form”)。height() 10，left: $('#search-form ')。偏移量()。左，位置： '绝对'，})；}})多思考：我们可以在前面加上一些判断，让我们的效果更加完美

if(data==null){ $(' # search-advise ')。hide()；返回false} if(数据。AS==null){ $(' # search-advise ')。hide()；返回false} if(数据。AS . Results==null){ $(' #搜索-建议')。hide()；返回false} if(数据。AS . Results[0]==null){ $(' # search-advise ')。hide()；返回false} if(数据。结果[0]。建议==null){ $(' # search-advise ')。hide()；返回false}对之前的代码进行测试后，发现仍然存在不足，对代码进行进一步修改：

$('#search-form ')。submit(function() { var关键字=$('#search_input '))。val()；console.log('word='关键字)；//if(关键字==null){ return false；} location . href=' http://cn . bing.com/search？q='关键字；});这里，我们的效果差不多出来了，效果截图：