相似百度智能提示下拉列表

使用jsonp跨域調用百度js實現搜索框智能提示，並實現鼠標和鍵盤對彈出框裏候選詞的操做【附源碼和在線測試地址】

2013-07-31 23:21 163人閱讀 評論(2) 收藏 舉報

項目中經常用到搜索，特別是導航類的網站。本身作關鍵字搜索不太現實，直接調用百度的是最好的選擇。
使用jquery.ajax的jsonp方法能夠異域調用到百度的js並拿到返回值，固然$.getScript也能夠實現跨域調用js。

jsonp快速入門：  
【原創】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例
關於jquery.ajax的jsonp方法是用以及其error回調函數不能正確執行，請參考園長dudu的文章：  
jquery ajax中使用jsonp的限制
jQuery插件jQuery-JSONP使用注意
其餘有關jsonp的文章：  
利用iframe實現ajax 跨域通訊的解決方案

ok，瞭解了jsonp的原理和應用後，咱們看看百度的智能提示是如何作的
在chrome的調試窗口下看看百度搜索發出的請求。當輸入關鍵字「a」，請求如圖：

 

用firebug看下請求的參數，如圖：

請求方式：get請求
請求參數：wd明顯是要搜索的關鍵字；cb是請求回來的處理函數，名字能夠隨便給；t是時間戳，防止緩存的；p不知道什麼意思，每次請求都給3就能夠了；sid也不知道什麼意思，不要也能夠請求，若是想要也能夠帶上，值就是上面截圖的值。

請求地址和參數都知道了，因而寫下以下js測試是否能夠拿到關鍵字提示（源碼裏的test.html頁面）：

var qsData = { 'wd': ‘a’, '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封裝全部請求要發送的參數；getData是自定義的名稱，用於處理返回的關鍵字（如下示例代碼把請求回來的關鍵字打印到了FireBug的控制檯）：

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

監控下文本框，實時的發送ajax請求並拿回數據是這樣的：

ok，測試可用，的確能夠拿到關鍵字提示。可是總不能把一堆關鍵字放到前臺讓用戶看，至少得跟百度同樣，能夠用鼠標和鍵盤方向鍵從候選詞框裏選詞吧。
最關鍵的來了，如今開始寫完整的智能提示並配合鼠標和鍵盤對候選詞的操做（源碼裏的index.html頁面），實現以下功能：

1. 即時監控字母鍵和數字鍵，按下就發ajax請求（也能夠設置延遲發請求，源碼裏有）；同時監控空格、退格、Delete、Enter等鍵；
2. 鼠標移入彈出層高亮選中的行，點擊可上屏；
3. 按鍵盤上下方向鍵能夠選擇候選詞，回車提交跳轉到百度搜索頁面；
4. 點擊頁面其餘部位自動隱藏彈出框；
5. 按ESC鍵隱藏彈出框

 

監控鼠標和鍵盤輸入的js（autoComplete.js 源碼裏有更詳細的註釋）：

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

        //監控鍵盤
        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) {
            //延時操做
            //clearTimeout(timeoutId);
            //timeoutId = setTimeout(function () {
            //            timeoutId = FillUrls();
            //             }, 500)
            FillUrls();  //異步請求
            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();
            }
        }
    });

 

最後實現效果展現。能夠鼠標選擇候選詞也能夠鍵盤方向鍵選擇，點擊便可上屏，回車直接跳到百度頁面：