jQuery UI Autocomplete是jQuery UI的自動完成組件，是我用過的最強大、最靈活的Autocomplete，它支持本地的Array/JSON數組、通過ajax請求的Array/JSON數組、JSONP、以及Function(最靈活)等方式來獲取數據。

支持的數據源

jQuery UI Autocomplete主要支持字符串Array、JSON兩種數據格式。

普通的Array格式沒有什么特殊的，如下：

["bjpowernode","動力節點","李四"]

對于JSON格式的Array，則要求有：label、value屬性，如下：

[{label: "動力節點", value: "bjpowernode"}, {label: "李四", value: "李四"}]

其中label屬性用于顯示在autocomplete彈出菜單，而value屬性則是選中后給文本框賦的值。

如果沒有指定其中一個屬性則用另一個屬性替代(即value和label值一樣)，如下：

[{label: "bjpowernode"}, {label: "李四"}][{value: "bjpowernode"}, {value: "李四"}]

如果label和value都沒有指定，則無法用于autocomplete的提示。

另外需要注意，對于從服務器端輸出的JSON的key必須用雙引號，如下：

[{"label": "動力節點", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]

否則可能會出現parsererror錯誤。

主要的參數

jQuery UI Autocomplete常用的參數有：

1.Source：用于指定數據來源，類型為String、Array、Function

String：用于ajax請求的服務器端地址，返回Array/JSON格式 Array：即字符串數組 或 JSON數組 Function(request, response)：通過request.term獲得輸入的值，response([Array])來呈現數據；(JSONP是這種方式)

2.minLength：當輸入框內字符串長度達到minLength時，激活Autocomplete

3.autoFocus：當Autocomplete選擇菜單彈出時，自動選中第一個

4.delay：即延遲多少毫秒激活Autocomplete

其他不常用的就不羅列了。

使用方法

假如頁面上有以下輸入框：

<input type="text" id="autocomp" /> 

AJAX請求
通過指定source為服務器端的地址來實現，如下：

$("#autocomp").autocomplete({  source: "remote.ashx",  minLength: 2});

然后在服務器端接收，并輸出相應結果，注意默認傳遞的參數名稱為term：

public void ProcessRequest(HttpContext context) {   // 查詢的參數名稱默認為term   string query = context.Request.QueryString["term"];   context.Response.ContentType = "text/javascript";   //輸出字符串數組 或者 JSON 數組   context.Response.Write("[{/"label/":/"動力節點/",/"value/":/"bjpowernode/"},{/"label/":/"李四/",/"value/":/"李四/"}]"); }