jquery提示插件autocomplete使用方法和官方下載地址

下載地址 https://github.com/lorecioni/autocomplete.js


 1 HTML結構：
 2 <input type="text" id="text" />  
 3 
 4 例子：
 5　　　　　　　　 $("#text").autocomplete( 這里寫數組或URL, {
 6                         minChars: 1, // 最小輸入一個字節
 7                         width: 310,  //下拉列表寬度 310像素
 8                         max: 10,  //最大10條數據
 9                         matchContains: true,
10                         highlightItem: false,
11                         cacheLength: 0,
12                         extraParams: {
13                             type: id //傳給后台的數據
14                         },
15                         parse: function (data) {  //解析請求回來的數據
16                             return $.map(data.content, function (row) {
17                                 return {
18                                     data: row,
19                                     value: row.name,
20                                     result: row.name
21                                 };
22                             });
23                         },
24                         formatItem: function (row, i, max) { // 設置需要顯示的數據
25                                    return row.name;  // 這里我只顯示請求回來的名字這項
26                             }
27                         }
28                     }).result(function (event, data, formatted) { // 這個是當選擇某項時觸發的回調函數
29                             advertiserId = data.id;  // 這里我把data里的id信息存儲起來
30 
31                     });
32 下面是具體的API：
33 語法： <br>
34 autocomplete(urlor data, [options] ) <br>

35 參數： <br>
36 url or data：數組或者url <br>

37 [options]：可選項，選項解釋如下： <br>
38 1) minChars (Number) <br>
39 在觸發autoComplete前用戶至少需要輸入的字符數，Default:1，如果設為0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表。 <br>

40 2) width (Number) <br>
41 指定下拉框的寬度，Default: input元素的寬度 <br>

42 3) max (Number) <br>
43 autoComplete下拉顯示項目的個數，Default: 10 <br>

44 4) delay (Number) <br>
45 擊鍵后激活autoComplete的延遲時間(單位毫秒)，Default: 遠程為400 本地10 <br>

46 5) autoFill (Boolean) <br>
47 要不要在用戶選擇時自動將用戶當前鼠標所在的&#20540;填入到input框，Default: false <br>

48 6) mustMatch (Booolean) <br>
49 如果設置為true，autoComplete只會允許匹配的結果出現在輸入框,所有當用戶輸入的是非法字符時將會得不到下拉框，Default:false <br>

50 7) matchContains (Boolean) <br>
51 決定比較時是否要在字符串內部查看匹配，如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false <br>

52 8) selectFirst (Boolean) <br>
53 如果設置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個&#20540;將被自動選擇,盡管它沒被手工選中(用鍵盤或鼠標).當然如果用戶選中某個項目,那么就用用戶選中的&#20540;. Default: true<br>

54 9) cacheLength (Number) <br>
55 緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1為不緩存.Default: 10 <br>

56 10) matchSubset (Boolean) <br>
57 autoComplete可不可以使用對服務器查詢的緩存,如果緩存對foo的查詢結果,那么如果用戶輸入foo就不需要再進行檢索了,直接使用緩存.通常是打開這個選項以減輕服務器的負擔以提高性能.只會在緩存長度大於1時有效.Default: true<br>

58 11) matchCase (Boolean) <br>
59 比較是否開啟大小寫敏感開關.使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false <br>

60 12) multiple (Boolean) <br>
61 是否允許輸入多個&#20540;即多次使用autoComplete以輸入多個&#20540;. Default:false <br>

62 13) multipleSeparator (String) <br>
63 如果是多選時,用來分開各個選擇的字符. Default:&quot;,&quot; <br>

64 14) scroll (Boolean) <br>
65 當結果集大於默認高度時是否使用卷軸顯示 Default: true <br>

66 15) scrollHeight (Number) <br>
67 自動完成提示的卷軸高度用像素大小表示 Default: 180 <br>

68 16) formatItem (Function) <br>
69 為每個要顯示的項目使用高級標簽.即對結果中的每一行都會調用這個函數,返回&#20540;將用LI元素包含顯示在下拉列表中.Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的自然數), 當前結果數組元素的個數即項目的個數.Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個&#20540;.<br>

70 17) formatResult (Function) <br>
71 和formatItem類&#20284;,但可以將將要輸入到input文本框內的&#20540;進行&#26684;式化.同樣有三個參數,和formatItem一樣.Default: none,表示要么是只有數據,要么是使用formatItem提供的&#20540;.<br>

72 18) formatMatch (Function) <br>
73 對每一行數據使用此函數&#26684;式化需要查詢的數據&#26684;式. 返回&#20540;是給內部搜索算法使用的. 參數&#20540;row <br>

74 19) extraParams (Object) <br>
75 為后台(一般是服務端的腳本)提供更多的參數.和通常的作法一樣是使用一個鍵&#20540;對對象.如果傳過去的&#20540;是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&amp;bar=4 (假設當前用戶輸入了foo). Default: {}<br>

76 20) result (handler) Returns:jQuery <br>
77 此事件會在用戶選中某一項后觸發，參數為： <br>

78 event: 事件對象. event.type為result. <br>

79 data: 選中的數據行. <br>

80 formatted:formatResult函數返回的&#20540; <br>
81 例如： <br>
82 $(&quot;#singleBirdRemote&quot;).result(function(event, data, formatted){ <br>
83 //如選擇后給其他控件賦&#20540;，觸發別的事件等等 <br>
84 })