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

支援的資料來源

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

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

其中label屬性用於顯示在autocomplete彈出選單，而value屬性則是選中後給文字框賦的值。

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

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

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

主要的引數

1. Source：用於指定資料來源，型別為String、Array、Function
   1. String：用於ajax請求的伺服器端地址，返回Array/JSON格式
   2. Array：即字串陣列 或 JSON陣列
   3. 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為伺服器端的地址來實現，如下：

然後在伺服器端接收，並輸出相應結果，注意預設傳遞的引數名稱為term：

public void ProcessRequest(HttpContext context) {     // 查詢的引數名稱預設為term     string query = context.Request.QueryString["term"];     context.Response.ContentType = ;     //輸出字串陣列 或者 JSON 陣列     context.Response.Write("[{\"label\":\"部落格園\",\"value\":\"cnblogs\"},{\"label\":\"囧月\",\"value\":\"囧月\"}]"); }

本地Array/JSON陣列