利用jsonp跨域調(diào)用百度js實(shí)現(xiàn)搜索框智能提示

更新時(shí)間：2016年08月24日 10:10:18 作者：心態(tài)要好

這篇文章主要為大家詳細(xì)介紹了使用jsonp跨域調(diào)用百度js實(shí)現(xiàn)搜索框智能提示，感興趣的小伙伴們可以參考一下

項(xiàng)目中常常用到搜索，特別是導(dǎo)航類的網(wǎng)站。自己做關(guān)鍵字搜索不太現(xiàn)實(shí)，直接調(diào)用百度的是最好的選擇。
使用jquery.ajax的jsonp方法可以異域調(diào)用到百度的js并拿到返回值，當(dāng)然$.getScript也可以實(shí)現(xiàn)跨域調(diào)用js。

ok，了解了jsonp的原理和應(yīng)用后，我們看看百度的智能提示是如何做的
在chrome的調(diào)試窗口下看看百度搜索發(fā)出的請(qǐng)求。當(dāng)輸入關(guān)鍵字“a”，請(qǐng)求如圖：

用firebug看下請(qǐng)求的參數(shù)，如圖：

請(qǐng)求方式：get請(qǐng)求
請(qǐng)求參數(shù)：wd明顯是要搜索的關(guān)鍵字；cb是請(qǐng)求回來的處理函數(shù)，名字可以隨便給；t是時(shí)間戳，防止緩存的；p不知道什么意思，每次請(qǐng)求都給3就可以了；sid也不知道什么意思，不要也可以請(qǐng)求，如果想要也可以帶上，值就是上面截圖的值。

請(qǐng)求地址和參數(shù)都知道了，于是寫下如下js測(cè)試是否可以拿到關(guān)鍵字提示（源碼里的test.html頁(yè)面）：

var qsData = { 'wd': ‘a(chǎn)', 'p': '3', 'cb': 'getData', 't': new Date().getMilliseconds().toString() };
  $.ajax({
   async: false,
   url: "http://suggestion.baidu.com/su",
   type: "GET",
   dataType: 'jsonp',
   jsonp: 'jsoncallback',
   data: qsData,
   timeout: 5000,
   success: function (json) {
   },
   error: function (xhr) {
   }
 });

qsData封裝所有請(qǐng)求要發(fā)送的參數(shù)；getData是自定義的名稱，用于處理返回的關(guān)鍵字（以下示例代碼把請(qǐng)求回來的關(guān)鍵字打印到了FireBug的控制臺(tái)）：

 function getData(data) {
   var Info = data['s']; //獲取異步數(shù)據(jù)
   console.log(Info);
  }

監(jiān)控下文本框，實(shí)時(shí)的發(fā)送ajax請(qǐng)求并拿回?cái)?shù)據(jù)是這樣的：

ok，測(cè)試可用，的確可以拿到關(guān)鍵字提示。但是總不能把一堆關(guān)鍵字放到前臺(tái)讓用戶看，至少得跟百度一樣，可以用鼠標(biāo)和鍵盤方向鍵從候選詞框里選詞吧。
最關(guān)鍵的來了，現(xiàn)在開始寫完整的智能提示并配合鼠標(biāo)和鍵盤對(duì)候選詞的操作（源碼里的index.html頁(yè)面），實(shí)現(xiàn)如下功能：
1.即時(shí)監(jiān)控字母鍵和數(shù)字鍵，按下就發(fā)ajax請(qǐng)求（也可以設(shè)置延遲發(fā)請(qǐng)求，源碼里有）；同時(shí)監(jiān)控空格、退格、Delete、Enter等鍵；
2.鼠標(biāo)移入彈出層高亮選中的行，點(diǎn)擊可上屏；
3.按鍵盤上下方向鍵可以選擇候選詞，回車提交跳轉(zhuǎn)到百度搜索頁(yè)面；
4.點(diǎn)擊頁(yè)面其他部位自動(dòng)隱藏彈出框；
5.按ESC鍵隱藏彈出框

監(jiān)控鼠標(biāo)和鍵盤輸入的js（autoComplete.js 源碼里有更詳細(xì)的注釋）：

var timeoutId; //延遲請(qǐng)求服務(wù)器
var highlightindex = -1; //高亮標(biāo)記
$(function () {
 $("#searchText").keyup(function (event) {
  var myEvent = event || window.event;
  var keyCode = myEvent.keyCode;
  //console.log(keyCode);

  //監(jiān)控鍵盤
  if (keyCode >= 65 && keyCode <= 90 || keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 111 || keyCode >= 186 && keyCode <= 222 || keyCode == 8 || keyCode == 46 || keyCode == 32 || keyCode == 13) {
   //延時(shí)操作
   //clearTimeout(timeoutId);
   //timeoutId = setTimeout(function () {
   //   timeoutId = FillUrls();
   //    }, 500)
   FillUrls(); //異步請(qǐng)求
   if (highlightindex != -1) {
    highlightindex = -1;
   }
  }
  else if (keyCode == 38 || keyCode == 40) {
   if (keyCode == 38) {  //向上
    var autoNodes = $("#auto").children("div")
    if (highlightindex != -1) {
     autoNodes.eq(highlightindex).css("background-color", "white");
     highlightindex--;
    } else {
     highlightindex = autoNodes.length - 1;
    }
    if (highlightindex == -1) {
     highlightindex = autoNodes.length - 1;
    }
    autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
    var comText = autoNodes.eq(highlightindex).text();
    $("#searchText").val(comText);
   }
   if (keyCode == 40) { //向下
    var autoNodes = $("#auto").children("div")
    if (highlightindex != -1) {
     autoNodes.eq(highlightindex).css("background-color", "white");
    }
    highlightindex++;
    if (highlightindex == autoNodes.length) {
     highlightindex = 0;
    }
    autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
    var comText = autoNodes.eq(highlightindex).text();
    $("#searchText").val(comText);
   }
  } else if (keyCode == 13) {  //回車
   if (highlightindex != -1) {
    var comText = $("#auto").hide().children("div").eq(highlightindex).text();
    highlightindex = -1;
    $("#searchText").val(comText);
   } else {
    $("#auto").hide();
    $("#searchText").get(0).blur();
   }
  } else if (keyCode == 27) { //按下Esc 隱藏彈出層
   if ($("#auto").is(":visible")) {
    $("#auto").hide();
   }
  }
 });

最后實(shí)現(xiàn)效果展示?？梢允髽?biāo)選擇候選詞也可以鍵盤方向鍵選擇，點(diǎn)擊即可上屏，回車直接跳到百度頁(yè)面：

源碼下載：http://xiazai.jb51.net/201608/yuanma/baidusearch(jb51.net).rar

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

您可能感興趣的文章: