jQuery autocomplete 自擴充插件、自動補全示例

   jquery-lib版本是 1.3.2的，該插件是簡單的擴充插件，代碼也比較簡單的封裝。是以看起來也比較簡單不是很費力，當然封裝得也不是很好。

不過做了浏覽器方面的相容，經測試相容IE6+、Firefox3.5+

首先看看autocomplete.js:

現在來分析上面的autocomplete插件的一些常用選項：

index就是選擇提示選項高亮的索引；

timeId是當使用者在文本域輸入時，利用setTimeout進行ajax請求伺服器獲得資料的而傳回的時間；

cssOptions是自動提示選項的樣式，這裡給出了一些預設的樣式；

var defaults = {

        width: "auto",//預設或自動設定寬度

        highlightColor: "#3399FE",//高亮時的顔色

        unhighlightColor: "#FFFFFF",//非高亮時的顔色

        css: cssOptions,

        dataType: "xml",//ajax請求傳回資料類型

        paramName: "word",//ajax請求的參數名稱，如果你有設定文本域的id，那麼就使用這個屬性

        delay: 500,//當文本域在不停的輸入時，ajax多久請求一次伺服器

    }; 

keys就是鍵盤鍵對應的值； 

autocomplete就是調用的函數，可以在裡面設定ajax請求的url，以及配置上面defaults中出現的參數，這個方法傳回的是文本域的值； 

autoTipTemplate就是輸入時顯示的提示框、提示菜單，傳回的是一個jquery對象； 

select是選擇提示菜單也就是下來提示菜單的高亮選項，target當然是目标對象了，index是即将被高亮的選項的索引，settings就是 

高亮的顔色配置，這個在預設defaults中就有的。是通過$.extend方法将defaults對象的屬性指派給settings對象的； 

keyOperator是針對文本域的鍵盤操作，這個是核心函數；操作提示、自動補全就靠它了；

下面看看html代碼，看看是如何調用autocomplete插件的：

看看這段代碼AutocompleteWordServlet是請求的Servlet，dataType是ajax請求伺服器端的傳回資料的類型，width可以設定自動提示菜單的寬度。

怎麼樣，用法比較簡單吧。當然後面你還可以加其他的配置，如：

代碼片段

這樣也是可以的；

看看AutocompleteWordServlet的代碼：

沒什麼可說的，就是擷取用戶端文本域的ajax請求的關鍵字，然後在jsp頁面中進行單詞過濾。不過你也可以在用戶端用正則

或是在伺服器端用正則過濾都是可以的。

下面看看word.jsp的内容：

就是一個xml格式的文檔，通過使用jstl表達式，用startsWith函數比對，如果通過就顯得在xml内容中，還有看到上面的contentType="text/xml; charset=UTF-8"了沒有，是text/xml哦！這點要注意，如果不設定有的浏覽器就不能解析了。

本文轉自hoojo部落格園部落格，原文連結：http://www.cnblogs.com/hoojo/archive/2011/03/28/1997608.html，如需轉載請自行聯系原作者