jQuery自動完成組建Autocomplete

一，屬性介紹

* minChars (Number)
　　在觸發autoComplete前用戶至少須要輸入的字符數.Default: 1，若是設爲0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表
* width (Number)
　　指定下拉框的寬度. Default: input元素的寬度
* max (Number)
　　autoComplete下拉顯示項目的個數.Default: 10
* delay (Number)
　　擊鍵後激活autoComplete的延遲時間(單位毫秒).Default: 遠程爲400 本地10
* autoFill (Boolean)
　　要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框. Default: false
* mustMatch (Booolean)
　　若是設置爲true,autoComplete只會容許匹配的結果出如今輸入框,全部當用戶輸入的是非法字符時將會得不到下拉框.Default: false
* matchContains (Boolean)
　　決定比較時是否要在字符串內部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false
* selectFirst (Boolean)
　　若是設置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,儘管它沒被手工選中(用鍵盤或鼠標).固然若是用戶選中某個項目,那麼就用用戶選中的值. Default: true
* cacheLength (Number)
　　緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1爲不緩存.Default: 10
* matchSubset (Boolean)
　　autoComplete可不可使用對服務器查詢的緩存,若是緩存對foo的查詢結果,那麼若是用戶輸入foo就不須要再進行檢索了,直接使用緩存.一般是打開這個選項以減輕服務器的負擔以提升性能.只會在緩存長度大於1時有效.Default: true
* matchCase (Boolean)
　　比較是否開啓大小寫敏感開關.使用緩存時比較重要.若是你理解上一個選項,這個也就不難理解,就比如foot要不要到FOO的緩存中去找.Default: false
* multiple (Boolean)
　　是否容許輸入多個值即屢次使用autoComplete以輸入多個值. Default: false
* multipleSeparator (String)
　　若是是多選時,用來分開各個選擇的字符. Default: ","
* scroll (Boolean)
　　當結果集大於默認高度時是否使用卷軸顯示 Default: true
* scrollHeight (Number)
　　自動完成提示的卷軸高度用像素大小表示 Default: 180 
* formatItem (Function)
　　爲每一個要顯示的項目使用高級標籤.即對結果中的每一行都會調用這個函數,返回值將用LI元素 包含顯示在下拉列表中. Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的天然數),

　　當前結果數組元素的個數即項目的個數. Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個值.
* formatResult (Function)
　　和formatItem相似,但能夠將將要輸入到input文本框內的值進行格式化.一樣有三個參數,和formatItem同樣.Default: none,表示要麼是隻有數據,要麼是使用formatItem提供的值.
* formatMatch (Function)
　　對每一行數據使用此函數格式化須要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row
* extraParams (Object)
　　爲後臺(通常是服務端的腳本)提供更多的參數.和一般的做法同樣是使用一個鍵值對對象.若是 傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {}
* result (handler)
　　此事件會在用戶選中某一項後觸發，參數爲：
　　　　event: 事件對象. event.type爲result.
　　　　data: 選中的數據行.
　　　　formatted:formatResult函數返回的值

2、支持中文

　　網上不少介紹修改源碼以支持firefox的中文檢索，其實沒有能夠直接寫一下代碼解決，由於firefox對keyup的支持是沒問題的。

   　　$("ele").on("keyup",function(){

        $(this).keydown();
    });

3、eg：

function bindAutoComplete(){
　　$("input[name^='xxx']").autocomplete(data, {
　　　　mustMatch:true, //文本框裏輸入的內容，必須是data參數裏的數據，若是不匹配，文本框就被清空
　　　　selectFirst:true, //在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選
　　　　scroll:true, //使用卷軸顯示
　　　　minChars: 0, //在自動完成激活以前填入的最小字符,設置爲0，在咱們雙擊文本框不輸入字符的時候，就會把數據顯示出來
　　　　cacheLength:1, //緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1爲不緩存.Default: 10
　　　　max:80, //下拉框中顯示的數據條數
　　　　width: 400, //指定下拉框的寬度
　　　　scrollHeight: 250, //自動完成提示的卷軸高度用像素大小表示 Default: 180
　　　　matchContains: true, //表示包含匹配，就是data參數裏的數據，是否只要包含文本框裏的數據就顯示 ，好比咱們輸入了「g」，能顯示"Google"和"Sogou"，若是將matchContains設爲fasle，則「Sogou」就不會顯示。
　　　　autoFill: false, //要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框. Default: false
　　　　

　　　　formatItem: function(row, i, max) { //以格式化列表中的 條目,其表明的是顯示的格式

　　　　　　return i + "/" + max + ": \"" + row.name + "\" " + " ["+row.charger+"] ";
　　　　},
　　　　formatMatch: function(row, i, max) { //配合formatItem使用，表示匹配的內容,表示用戶輸入的內容在哪些數據項裏面搜索
　　　　　　return row.name+" "+row.charger;
　　　　},
　　　　formatResult: function(row) { //是定義最終返回的數據
　　　　　　var firstChar=row.name.charAt(0);
　　　　　　//若是首字符非英文，刪除首字符後返回，用於中文查詢的實現
　　　　　　if(!(firstChar>='a'&&firstChar<='z'||firstChar>='A'&&firstChar<='Z')&&!(firstChar>='0'&&firstChar<='9'))
　　　　　　　　return row.name.substr(1,row.name.length);
　　　　　　else
　　　　　　　　return row.name;
　　　　}
　　});
　　//選中的結果交給result中的function cascadeInvoiceChangeProjectInfo()進一步處理
　　$("input[name^='xxx']").result(cascadeInvoiceChangeProjectInfo);
}