項目中有時會用到自動補全查詢，就像Google搜索框、淘寶商品搜索功能，輸入漢字或字母，則以該漢字或字母開頭的相關條目會顯示出來供用戶選擇， autocomplete插件就是完成這樣的功能。
autocomplete官網 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下載jQuery autocomplete插件）。
淘寶商品搜索功能 效果：
下面來使用 autocomplete插件來實現類似效果。
1. 創建 AjaxPage.aspx 頁面，在其中定義 WebMethod 方法來返回 搜索頁面需要的輸入框所有提示條目。 后臺代碼如下：
1 using System.Collections.Generic;
2 using System.IO;
3 using System.Runtime.Serialization.Json;
4 using System.Web.Services;
5
6 public partial class AjaxPage : System.Web.UI.Page
7 {
8 [WebMethod]
9 public static string GetAllHints()
10 {
11 Dictionary<string, string> data = new Dictionary<string, string>();
12 data.Add("蘋果4代iphone正品", "21782");
13 data.Add("蘋果4代 手機套", "238061");
14 data.Add("蘋果4", "838360");
15 data.Add("蘋果皮", "242721");
16 data.Add("蘋果筆記本", "63348");
17 data.Add("蘋果4s", "24030");
18 data.Add("戴爾筆記本", "110105");
19 data.Add("戴爾手機", "18870");
20 data.Add("戴爾鍵盤", "30367");
21
22 DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());
23
24 using (MemoryStream ms = new MemoryStream())
25 {
26 serializer.WriteObject(ms, data);
27 return System.Text.Encoding.UTF8.GetString(ms.ToArray());
28 }
29 }
30 }
注：該方法返回的數據格式為json字符串。
2. 創建搜索頁面 Index.aspx， 前臺代碼如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <link rel="Stylesheet" href="Styles/jquery.autocomplete.css" />
9 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
10 <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
11 <script type="text/javascript">
12 var v = 1;
13 $(document).ready(function () {
14 $.ajax({
15 type: "POST",
16 contentType: "application/json",
17 url: "AjaxPage.aspx/GetAllHints",
18 data: "{}",
19 dataType: "json",
20 success: function (msg) {
21 var datas = eval('(' + msg.d + ')');
22 $("#txtIput").autocomplete(datas, {
23 formatItem: function (row, i, max) {
24 return "<table width='400px'><tr><td align='left'>" + row.Key + "</td><td align='right'><font style='color: #009933; font-family: 黑體; font-style: italic'>約" + row.Value + "個寶貝</font> </td></tr></table>";
25 },
26 formatMatch: function(row, i, max){
27 return row.Key;
28 }
29 });
30 }
31 });
32 });
33 </script>
34 </head>
35 <body>
36 <form id="form1" runat="server">
37 <div>
38 <center>
39 <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>
40 </center>
41 </div>
42 </form>
43 </body>
44 </html>
實現效果如下：
3. 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函數返回的值
例如：
$("#singleBirdRemote").result(function(event, data, formatted) {
//如選擇后給其他控件賦值，觸發別的事件等等
});