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

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

·data(可選)，作為HTTP消息的實(shí)體內(nèi)容發(fā)送給服務(wù)器;

·callback(可選)，載入成功后的回調(diào)函數(shù)，自動將請求結(jié)果和狀態(tài)傳遞給該方法;

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

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

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

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

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

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

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

其中keyCode值38、40分別代表上鍵和下鍵。currentTxt記錄的是當(dāng)前文本框的內(nèi)容。

當(dāng)請求成功后的回調(diào)函數(shù)pinyinCallback該做什么呢?這個回調(diào)函數(shù)該做的應(yīng)該有這些事，首先要把請求來的數(shù)據(jù)在前臺呈現(xiàn)出來，這樣就需要創(chuàng)建一些新的DOM元素來裝這些內(nèi)容。就不廢話了，直接上代碼吧：

Html代碼：

<div class="mb20 pr f14 ff" id="tagDiv"> 
     <p><span>新標(biāo)簽</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"));  
 } 

目前這個回調(diào)函數(shù)只是將請求回來的數(shù)據(jù)添加到創(chuàng)建的id為resultDiv的容器內(nèi)，再將這個容器添加到頁面中已存在的id為tagDiv的容器中。而為了美觀一點(diǎn)并為了實(shí)現(xiàn)點(diǎn)擊一個列表項(xiàng)就提交的功能，這個回調(diào)函數(shù)還可以做這些工作：

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

在列表項(xiàng)被點(diǎn)擊后就提交一次表單，并把當(dāng)前文本框的內(nèi)容設(shè)置為列表項(xiàng)的內(nèi)容。

接下來就要實(shí)現(xiàn)鍵盤上下鍵控制的功能了，這樣，全部的回調(diào)函數(shù)代碼為：

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;    //標(biāo)記上下鍵時所處位置  
   
         document.documentElement.onkeydown = function (e) {  
             e = window.event || e;  
             if (e.keyCode == 40) {  //下鍵操作  
                 if (++index == $("#resultDiv li").length) {  //判斷加一操作后index值是否超出列表數(shù)目界限  
                     index = -1;             //超出的話就將index值變?yōu)槌跏贾? 
                     $("#newTag").val(currentTxt);    //并將文本框中值設(shè)為用戶用于搜索的值  
                     $("#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值是否超出列表數(shù)目界限  
                     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，現(xiàn)在這個功能就差不多搞定了，在ie6下也是完全正常，不過還是有一些bug需要改進(jìn)，另外這個方法還是有可以優(yōu)化的地方吧。曬一曬效果圖：

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

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

【編輯推薦】

1. 教你開發(fā)一款極為簡單實(shí)用的jQuery圖表插件
2. jQuery實(shí)戰(zhàn)開發(fā)表單驗(yàn)證與自動完成提示插件
3. 從零開始學(xué)習(xí)jQuery之必知的工具函數(shù)
4. 從零開始學(xué)習(xí)jQuery之jQuery實(shí)施方案
5. 6月10款超贊的jQuery插件新鮮出爐