標籤：
簡單用法：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../css/autocomplete/jquery.autocomplete.css"/> <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/autocomplete/jquery.autocomplete.js"></script> <script type="text/javascript"> $(function(){ var data = "the People‘s Republic of China".split(" "); $("#autocomplete").autocomplete(data,{minChars:0}).result(function(event,data,formatted){ alert(data); }); }); </script> </head> <body> <input type="text" id="autocomplete"/> </body></html>
更多參數說明：
第一個參數除了本機資料外，還可以是url請求路徑。
配置項參數說明：
dataType（String）：資料類型.Default:text，如果第一個參數是url地址，並且返回的是json資料，則設定此配置屬性為‘json‘即可；
minChars（Number）：在觸發autoComplete前使用者至少需要輸入的字元數.Default: 1，如果設為0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表；
max（Number）：autoComplete下拉顯示項目的個數.Default: 10；
width（Number）：指定下拉框的寬度. Default: input元素的寬度；
delay（Number）：擊鍵後啟用autoComplete的延遲時間(單位毫秒).Default: 遠程為400 本地10；
autoFill（Boolean）：要不要在使用者選擇時自動將使用者當前滑鼠所在的值填入到input框. Default: false；
mustMatch（Boolean）：如果設定為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, 表示不指定自訂的處理函數,這樣下拉式清單中的每一行只包含一個值；
formatMatch（Function）：對每一行資料使用此函數格式化需要查詢的資料格式. 傳回值是給內部搜尋演算法使用的. 參數值row i max；
formatResult（Function）： 和formatItem類似,但可以將將要輸入到input文字框內的值進行格式化.同樣有三個參 數,和formatItem一樣.Default: none,表示要麼是只有資料,要麼是使用formatItem提供的值；
extraParams（Object）：為後台(一般是服務 端的指令碼)提供更多的參數.和通常的作法一樣是使用一個索引值對對象.如果傳過去的值是 { bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設目前使用者輸入了foo). Default: {}；
result （handler） Returns: jQuery：此事件會在使用者選中某一項後觸發，參數為： event: 事件對象. event.type為result. data: 選中的資料行. formatted:formatResult函數返回的值 例如： $("#singleBirdRemote").result(function(event, data, formatted) { //如選擇後給其他控制項賦值，觸發別的事件等等 });
一個稍微複雜點的例子：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../css/autocomplete/jquery.autocomplete.css"/> <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/autocomplete/jquery.autocomplete.js"></script> <script type="text/javascript"> $(function(){ var emails = [ { name: "Peter", to: "[email protected]" }, { name: "Molly", to: "[email protected]" }, { name: "Forneria", to: "[email protected]" }, { name: "Master <em>Sync</em>", to: "[email protected]" }, { name: "Dr. <strong>Tech</strong> de Log", to: "[email protected]" }, { name: "Don Corleone", to: "[email protected]" }, { name: "Mc Chick", to: "[email protected]" }, { name: "Donnie Darko", to: "[email protected]" }, { name: "Quake The Net", to: "[email protected]" }, { name: "Dr. Write", to: "[email protected]" }, { name: "GG Bond", to: "[email protected]" }, { name: "Zhuzhu Xia", to: "[email protected]" } ]; $("#autocomplete").autocomplete(emails,{ minChars: 0,//自動完成啟用之前填入的最小字元 max:12,//列表條目數 width: 400,//提示的寬度 scrollHeight: 300,//提示的高度 matchContains: true,//是否只要包含文字框裡的就可以 autoFill:false,//自動填滿 formatItem: function(data, i, max) {//格式化列表中的條目 row:條目對象,i:當前條目數,max:總條目數return i + ‘/‘ + max + ‘:"‘ + data.name + ‘"[‘ + data.to + ‘]‘; }, formatMatch: function(data, i, max) {//配合formatItem使用，作用在於，由於使用了formatItem，所以條目中的內容有所改變，而我們要匹配的是原始的資料，所以用formatMatch做一個調整，使之匹配未經處理資料return data.name + data.to; }, formatResult: function(data) {//定義最終返回的資料，比如我們還是要返回未經處理資料，而不是formatItem過的資料return data.to; } }).result(function(event,data,formatted){ alert(data.to); }); }); </script> </head> <body> <input type="text" id="autocomplete"/> </body></html>
中文支援：
在對中文IME開啟時，firefox3.0中是對中文拼音的自動匹配，而對輸入後的中文無法及時觸發匹配；而在我的IE6.0下，則無此問題。
原因分析： Autocomplete 外掛程式對使用者輸入字元的觸發自動匹配是通過”keydown”事件進行的（可分析 jquery.autocomplete.js第92行），在IE6中，當IME開啟時，輸入的字元是不會觸發”keydown”的，只有中文輸入完畢才 觸發之，所以中文輸入和latin文沒有區別的；但在firefox3.0下，無論IME開啟否，按鍵都會觸發”keydown”事件，所以造成中文輸入 完畢，自動匹配的是剛才打出的部分中文拼音字母。
解決方案： 網上查到的最多做法是修改 jquery.autocomplete.js第92行，將”keydown”替換為”keyup”， 但這個不是根本辦法，雖然這樣改後可在firefox中及時對輸入的中文進行自動匹配，但將原外掛程式中斷行符號、tab等重要的事件機制破壞了，比如這樣改後， 如果你的input是在一個form裡的話，斷行符號從原來的將選定項輸入到input中變為了直接提交form表單了，這並不是我們想要的。
我 的方法原理是，補充一個原外掛程式觸發查詢的事件，就是當input輸入欄發生字元變化時，重新進行查詢（調用其內部的onChange函數），這裡 主要針對firefox而言，因為我們的系統訪問最多的是IE和firefox。而恰好firefox有一個input變化的事件就是oninput，那麼我們只要在原jquery.autocomplete.js第199行（即$input.bind方法的末尾），插入如下代碼：
.bind("input", function() { onChange(0, true); })
Jquery autocomplete外掛程式的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
