釋出自己寫的jQuery自動完成的插件（AutoComplete）(28日更新）

        項目中要用到ajax的自動完成功能，又不想用ajax.net中的自動完成功能。幹脆基于jquery自己做一個js來實作。做完後感覺還不錯，就想把它直接做成jquery的插件算了，正在查怎麼做jquery插件的時候，在jquery官網上發現原來已經有了自動完成插件    (︸_︸)，算了還是做出來吧。         做出來後感覺還不錯，最起碼比官方的要小一些，而且還沒有官方的缺點（官方插件用滑鼠選擇後，再用鍵盤選擇會有問題），還加上了自己需要的一些功能。         下面介紹一下自己的成果，就是兩個檔案，jquery.AutoComplete.js和AutoComplete.css。先說AutoComplete.css，裡面就是三個樣式。  

.floor

{...} {

    visibility: hidden;

    position: absolute;

    background-color:white;

    border: 1px solid;

    overflow: auto;

}

.unselected

{...} {

    background-color: white;

}

.selected

{...} {

    background-color: dodgerblue;

    color: white;

}

      所有功能都是用div實作的，.floor是下拉清單的底闆的樣式，.unselected和.selected是未選中和選中時的樣式。樣式的名稱不能改，還有.floor裡面visibility: hidden;和position: absolute;這兩個是不能改的，其他都可以自己來定義。          再說jquery.AutoComplete.js的用法，先要在頁面裡引用上面的css檔案，jquery-latest.pack.js（jquery檔案）和jquery.AutoComplete.js檔案（都是廢話），然後在頁面裡加上下面的代碼。  

     < script  language ="javascript"  type ="text/javascript" > ...

        $(function()...{

            $("input").AutoComplete(request,options);

        });

     </ script >

說明一下參數 request: 必需，ajax請求的位址，隻要能傳回一個字元串就可以。 option: 可選，用這個形式“{seperator:"；",autoTab:true,parameterName:"key",kwlength:2}” 詳細說明一下: seperator ：表示分隔符，預設為逗号,上面表示用分号，就是說rquest要輸出一個類似“a;b;c;d”的字元串。 autoTab ：表示是否按回車後自動跳轉到下一個文本框,true為自動跳轉。 parameterName: 回傳時的參數名,如果request為data.asp，parameterName為key的話，ajax的請求為data.asp?key=***的形式，如果省略的話，就使用文本框的name屬性；如果文本框name屬性也沒有的話，就使用文本框的id屬性。（如果連id也沒有的話，這個插件就不能用了） kwlength ：關鍵字最小長度，預設值為3，表示文本框内文本的長度最小為3時，才做ajax請求。   下面給一個完整的例子

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >

< head >

     < title > AutoComplete </ title >

     < link  href ="AutoComplete.css"  type ="text/css"  rel ="stylesheet" >

     < script  language ="javascript"  type ="text/javascript"  src ="js/jquery-latest.js" ></ script >

     < script  language ="javascript"  type ="text/javascript"  src ="js/jquery.AutoComplete.js" ></ script >

     < script  language ="javascript"  type ="text/javascript" > ...

        $(function()...{

            $("input").AutoComplete("data.asp",...{seperator:";",autoTab:true,parameterName:"key",kwlength:2});

        });

     </ script >

</ head >

< body >

     < input  type ="text"  id ="test"   />

     < input  type ="text"  id ="Text3"   />

     < table >

         < tr >

             < td >

                 < input  id ="Text1"  type ="text"  name ="key"   /></ td >

         </ tr >

         < tr >

             < td >

                 < input  id ="Text2"  type ="text"  name ="key"   /></ td >

         </ tr >

     </ table >

</ body >

</ html >

Data.asp 代碼：

< %

if   len (request.querystring( " key " ))  >   0   then

    datas  =   ""

     for  i = 0   to   10

        datas  =  datas  &  request.querystring( " key " )  &  i  &   " ; "

     next  

    response.write(datas)

end   if

% >

Data.asp很簡單，就是用傳的參數值生成一個字元串，用分号分割；效果看下面的圖

具體例子可以到 http://bbs.jquery.org.cn/viewthread.php?tid=192&extra=page%3D1下載下傳，直接放到IIS的虛拟目錄下，用IE6、IE7和FF下測試都沒有問題。 有什麼錯誤的話請大家及時告訴我，可以直接留言或發Email:[email protected] 實際使用中還是發現了一些問題，做了一些修改，樣式表裡.floor裡面visibility: hidden;可以不用了，增加了一個.net伺服器端的例子，下載下傳位址在http://www1.51ok.com/down.do?7A5EFE8D0FD43CDF8FE1336336A5A569，可以直接下載下傳了。