jquery中用jsonp實現搜尋方塊功能，jqueryjsonp實現

jquery中用jsonp實現搜尋方塊功能，jqueryjsonp實現

前面的話：
    在上周本來想發一篇模仿必應搜尋的介面。但是在準備寫文章之前突然想到前面學習了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 解譯器。