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交互逻辑实现

使用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跨域解决方案

按理说，到这里应该能得到预期结果，但经过反复排查未发现错误所在。视频中接着介绍了使用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结合JSONP实现搜索框自动补全功能

前言与问题背景

基础界面实现

jQuery交互逻辑实现

JSONP跨域解决方案

最终代码整合与优化

实用工具推荐