欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery中用jsonp實(shí)現(xiàn)搜索框功能

 更新時(shí)間：2016年10月18日 08:31:46   作者：foodoir  
這篇文章主要為大家詳細(xì)介紹了jquery中用jsonp實(shí)現(xiàn)搜索框功能的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前面的話(huà)：
    在上周本來(lái)想發(fā)一篇模仿必應(yīng)搜索的界面。但是在準(zhǔn)備寫(xiě)文章之前突然想到前面學(xué)習(xí)了ajax技術(shù)，在這里我也讓我的頁(yè)面有一種不需要手動(dòng)刷新就能獲取到數(shù)據(jù)。但是發(fā)現(xiàn)用前面的方法并不能獲取到我想要的效果。無(wú)奈前幾天電腦換系統(tǒng)，把之前的源碼丟了（前面有個(gè)不好的習(xí)慣就是把最近在做的東西放桌面）。今天想徹底把這個(gè)問(wèn)題搞明白。

用jquery和ajax進(jìn)行初步的嘗試：

（本代碼是參考慕課網(wǎng)，搜索框制作視頻制作，有關(guān)具體詳情請(qǐng)參考視頻。自己之前的代碼找不到了，之前最先的想法也是來(lái)自那里，所以這次直接用那里的代碼）

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>搜索結(jié)果1</li> 
   <li>搜索結(jié)果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來(lái)實(shí)現(xiàn)效果：
在這之前，我們基本上得到了我們想要的圖形效果，但是我們?cè)谒阉骺騼?nèi)輸入想要查詢(xún)的內(nèi)容這時(shí)候是不會(huì)有效果的（一般的搜索框效果都是在鍵盤(pán)輸入的時(shí)候，下面會(huì)顯示一部分與之關(guān)聯(lián)的關(guān)鍵搜索信息，然后鼠標(biāo)移動(dòng)上去點(diǎn)擊后會(huì)跳到相應(yīng)鏈接）。為了一步步驗(yàn)證我們的思路，我們這里修改一下之前的代碼。

1、將li標(biāo)簽中的定位去掉；

2、在html中將li標(biāo)簽設(shè)置為隱藏。然后我們進(jìn)行后面的操作。

思考一：如何在鍵盤(pán)輸入的時(shí)候就顯示相關(guān)信息（即：li標(biāo)簽中的內(nèi)容）？

思路：我們先引入jquery，然后文檔加載完后執(zhí)行一個(gè)鍵盤(pán)事件，然后在鍵盤(pán)事件中改變相應(yīng)的css效果

$(function() {
 //鍵盤(pán)事件
 $("#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",
    });
 });
});

這時(shí)候，我們?cè)谒阉骺蛑休斎雰?nèi)容時(shí)，下面會(huì)跟著顯示對(duì)應(yīng)的搜索（模擬）

思考二：如何實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊搜索按鈕的時(shí)候，會(huì)搜索相應(yīng)的內(nèi)容？

思路：用鼠標(biāo)點(diǎn)擊事件，讓鼠標(biāo)點(diǎn)擊后設(shè)置一個(gè)地址，點(diǎn)擊后直接跳到相應(yīng)地址，代碼實(shí)現(xiàn)：

 //事件代理 --》鼠標(biāo)點(diǎn)擊事件
 $(document).delegate("li", "click", function() {
  var keyword = $(this).text();
  location. + keyword;
 });

思考三：我們?nèi)绾卧谒阉骺蜉斎霐?shù)據(jù)時(shí)，下面會(huì)提示相關(guān)搜素信息？
思路：我們我們用jquery中的get去實(shí)現(xiàn)，參考代碼：

  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");

到這里，按理來(lái)說(shuō)我們這里應(yīng)該可以得到我們想要的結(jié)果了，但是，找了好久都沒(méi)有發(fā)現(xiàn)哪里錯(cuò)了。視頻里面接著描述了用JSONP來(lái)進(jìn)行跨域操作，但是我也按視頻中的操作，始終得不到我想要的結(jié)果，于是我埋頭去看《javascript高級(jí)程序設(shè)計(jì)》，去找關(guān)于jsonp的用法

關(guān)于jsonp：
    關(guān)于jsonp，《javascript高級(jí)程序設(shè)計(jì)》一書(shū)中介紹的比較少，下面是我看了之后的歸納。
    jsonp的全寫(xiě)是 json with padding，其出現(xiàn)是為了解決各主瀏覽器的之間的同源策略的問(wèn)題，一般來(lái)說(shuō)ServerA 域下面的頁(yè)面是沒(méi)有辦法與非 ServerA 下面的資源進(jìn)行溝通，而 Html 的<script>元素是個(gè)例外，利用 <script> 這個(gè)開(kāi)源策略，網(wǎng)頁(yè)可以從其他來(lái)源動(dòng)態(tài)獲取 json數(shù)據(jù)，而這種模式就是所謂的 JSONP，用 jsonp 抓到并不是真正意義上 的 json 而是任意的 javascript ,它是直接通過(guò) javascript 編譯器編譯而不是 json 解釋器。更多關(guān)于json的知識(shí)請(qǐng)點(diǎn)擊：http://www.cnblogs.com/foodoir/p/5894760.html查看   

既然書(shū)上沒(méi)有寫(xiě)，那就去網(wǎng)上搜索資源。這里截取一段和文章前面有關(guān)的信息的代碼：

  $.ajax({
    type: "get",
    async: false,
    url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
    dataType: "jsonp",
    jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)    
    jsonpCallback:"flightHandler",//自定義的jsonp回調(diào)函數(shù)名稱(chēng)，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫(xiě)"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)   
　　　　success: function(json){
     alert(json.price + json.tickets + ' 張。');
    },
    error: function(){
     alert('fail');
    }
   });

通過(guò)這段代碼來(lái)修改我們自己的代碼：

  $.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",
    });
   }
  })

更多思考：我們可以在前面增加一些判斷，讓我們的效果實(shí)現(xiàn)起來(lái)更完美

 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;
    }

經(jīng)過(guò)測(cè)試前面的代碼，發(fā)現(xiàn)還有不足，進(jìn)一步修改代碼：

 $("#search-form").submit(function() {
  var keyword = $("#search_input").val();
  console.log("word=" + keyword);
  //if (keyword == null) {return false;} 
  location. + keyword;
 });

到這里，我們的效果差不多就出來(lái)了，效果截圖：

源代碼已托管至：http://sandbox.runjs.cn/show/gfdpkysk，點(diǎn)擊即可查看。

后面的話(huà)：

　　這些天學(xué)習(xí)的新東西挺多的，現(xiàn)在有一個(gè)想法就是把最近學(xué)的東西把它串聯(lián)起來(lái)，做一個(gè)綜合的效果。參考必應(yīng)網(wǎng)站，真的有好多東西已經(jīng)可以做出來(lái)了，接下來(lái)的一段時(shí)間就好好的把自己想要做的效果實(shí)現(xiàn)好。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論