jQuery實現仿百度搜索時的下拉列表

作者：luckyadam 2011-06-29 16:02:40

當我們使用百度或是谷歌進行搜索時，只要輸入一個字母就可以產生一個下拉列表，并且可以通過鍵盤上下鍵來控制列表項的選擇。最近在項目中也碰到了類似的情況，在文本框中輸入某個字母就可以出現一個下拉列表，展現從數據庫里搜索過來的結果。

先說一下我的實現思路吧，當用戶在文本框中輸入時，可以利用ajax方式將文本框內內容傳給后臺的某個頁面，在那個頁面中經過處理后將產生的結果(這里的結果是一個字符串數組)再獲取過來在前臺呈現。有了思路后就開始考慮怎么去具體實現吧。首先要使用ajax的話，就想到可以使用jQuery提供的$.post()方法，這個方法可帶4個參數，分別是：

·url，請求的頁面URL地址;

·data(可選)，作為HTTP消息的實體內容發送給服務器;

·callback(可選)，載入成功后的回調函數，自動將請求結果和狀態傳遞給該方法;

·type(可選)，服務器端返回的數據格式，可以是：xml、html、script、json等。

好，現在對$.post()方法有了一定的了解，現在就可以考慮這個方法該怎么來寫了。在我的項目中，請求的URL地址是@Url.Action("GetTags")(由于是ASP.NET MVC架構，地址是由Routing配置產生的，這個轉義到前臺就是一個普通的URL地址)，需要傳送的是ID為newTag的文本框中的值，所以第二個參數為{pinyins: $("#newTag").val()}，這里的pinyins是由后臺定義的。第三個參數callback是處理請求成功后要做的事，暫且命名為pinyinCallback，第四個參數設為'json'，即數據格式為一個JSON對象。這樣的話，這個ajax請求可以寫為：

$.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback,  'json');

但是如果用戶每輸入一個字母就立即往服務器傳的的話，服務器的承載就會過大，于是考慮可以將每次請求延遲一秒發送，于是發送請求的方法可以這樣定義：

function pinyinOption() {  
         var t = setTimeout(function () {  
            $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');  
        }, 1000);  
   
   }

現在要考慮的就是這個方法在何時調用。既然是以用戶輸入結果來查詢的，那么可以考慮jQuery的keyup事件，可以在文本框(id為newTag)的keyup事件觸發后就調用之前定義的方法。但是又考慮到這個功能中可以通過鍵盤中上下鍵來控制列表中的選項，所以這個keyup事件可以這樣來定義：

$("#newTag").keyup(function (e) {  
          if (e.keyCode != 40 && e.keyCode != 38) {  
                currentTxt = $("#newTag").val();  
               pinyinOption();  
           }  
       }).focus(function () {  
           this.select();  
     });

其中keyCode值38、40分別代表上鍵和下鍵。currentTxt記錄的是當前文本框的內容。

當請求成功后的回調函數pinyinCallback該做什么呢?這個回調函數該做的應該有這些事，首先要把請求來的數據在前臺呈現出來，這樣就需要創建一些新的DOM元素來裝這些內容。就不廢話了，直接上代碼吧：

Html代碼：

<div class="mb20 pr f14 ff" id="tagDiv"> 
     <p><span>新標簽</span> @Html.TextBox("newTag", null, new { style = "border: 1px solid #555;height: 20px;", autocomplete ="off"})  
            <input type="submit" value="添加" /><span>@ViewBag.Info</span></p> 
 </div>

var $resultDiv = $('<div id="resultDiv" class="pa f12 ff"></div>');  
     var $resultUl = $('<ul id="resultUl"></ul>');  
     var $resultLi = [];  
     var currentTxt;  
   
     function pinyinCallback(data) {   
         $("#resultDiv").show();  
         $resultUl.html("");  
         for (var i = 0; data[i]; i++) {  
             $resultLi[i] = $("<li></li>");  
            $resultLi[i].html(data[i]);  
             $resultUl.append($resultLi[i]);  
         }  
         if ($resultUl.html() == "") {  
             $("#resultDiv").hide();  
         }  
         $resultUl.appendTo($resultDiv);  
         $resultDiv.appendTo($("#tagDiv"));  
 }

目前這個回調函數只是將請求回來的數據添加到創建的id為resultDiv的容器內，再將這個容器添加到頁面中已存在的id為tagDiv的容器中。而為了美觀一點并為了實現點擊一個列表項就提交的功能，這個回調函數還可以做這些工作：

js代碼：

$("#resultDiv li").hover(function () {  
           $(this).addClass("esultDivLiHover");  
         }, function () {  
           $(this).removeClass("esultDivLiHover");  
  });  
 $("#resultDiv").blur(function () {  
          $("#resultDiv").hide();  
 });  
 $("#resultDiv li").click(function (event) {  
          $("#newTag").val($(this).text());  
          $("form").submit();  
 });

css代碼：

#resultDiv  
 {  
     left: 47px;  
     border: 1px solid #000;  
     background: #fff;  
     z-index: 100;  
     width: 200px;  
       
 }  
 #resultDiv li  
 {  
     cursor: default;  
     padding: 2px 4px;  
 }  
 .esultDivLiHover  
 {  
     background: #cfcfcf;  
 }

在列表項被點擊后就提交一次表單，并把當前文本框的內容設置為列表項的內容。

接下來就要實現鍵盤上下鍵控制的功能了，這樣，全部的回調函數代碼為：

function pinyinCallback(data) {   
         $("#resultDiv").show();  
         $resultUl.html("");  
         for (var i = 0; data[i]; i++) {  
             $resultLi[i] = $("<li></li>");  
             $resultLi[i].html(data[i]);  
             $resultUl.append($resultLi[i]);  
         }  
         if ($resultUl.html() == "") {  
             $("#resultDiv").hide();  
         }  
         $resultUl.appendTo($resultDiv);  
         $resultDiv.appendTo($("#tagDiv"));  
         $("#resultDiv li").hover(function () {  
             $(this).addClass("esultDivLiHover");  
         }, function () {  
             $(this).removeClass("esultDivLiHover");  
         });  
         $("#resultDiv").blur(function () {  
             $("#resultDiv").hide();  
         });  
         $("#resultDiv li").click(function (event) {  
             $("#newTag").val($(this).text());  
             $("form").submit();  
         });  
         //鍵盤上下鍵控制  
         var index = -1;    //標記上下鍵時所處位置  
   
         document.documentElement.onkeydown = function (e) {  
             e = window.event || e;  
             if (e.keyCode == 40) {  //下鍵操作  
                 if (++index == $("#resultDiv li").length) {  //判斷加一操作后index值是否超出列表數目界限  
                     index = -1;             //超出的話就將index值變為初始值  
                     $("#newTag").val(currentTxt);    //并將文本框中值設為用戶用于搜索的值  
                     $("#resultDiv li").removeClass("esultDivLiHover");  
                 }  
                 else {  
                     $("#newTag").val($($("#resultDiv li")[index]).text());  
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");  
                 }  
             }  
             if (e.keyCode == 38) {  //上鍵操作  
                 if (--index == -1) {    //判斷自減一后是否已移到文本框  
                     $("#newTag").val(currentTxt);  
                     $("#resultDiv li").removeClass("esultDivLiHover");  
                 }  
                 else if (index == -2) {     //判斷index值是否超出列表數目界限  
                     index = $("#resultDiv li").length - 1;  
                     $("#newTag").val($($("#resultDiv li")[index]).text());  
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");  
                 }  
                 else {  
                     $("#newTag").val($($("#resultDiv li")[index]).text());  
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");  
                 }  
             }  
         };  
     }

OK，現在這個功能就差不多搞定了，在ie6下也是完全正常，不過還是有一些bug需要改進，另外這個方法還是有可以優化的地方吧。曬一曬效果圖：

希望明天又是美好的一天，又不正的地方還希望多多指出。

原文鏈接：http://www.cnblogs.com/luckyadam/archive/2011/06/29/2093477.html

【編輯推薦】

教你開發一款極為簡單實用的jQuery圖表插件
jQuery實戰開發表單驗證與自動完成提示插件
從零開始學習jQuery之必知的工具函數
從零開始學習jQuery之jQuery實施方案
6月10款超贊的jQuery插件新鮮出爐

責任編輯：陳貽新來源： luckyadam的博客

jQuery