介紹
在 jQuery UI 的最近更新中增加了自動完成控件 AutoComplete，這為我們提供了又一個強大的開發工具，這裡介紹一下這個控件的使用方式。
首先，jQuery UI 是基於 jQuery 的，所以，必須在你的頁面中首先引用 jQuery 腳本庫，然後再引用 jQuery UI 庫，對於 jQuery UI 庫來說，可以引用整個的庫，也可以僅僅引用當前頁面用到的庫。
jQuery UI 的下載地址：http://jqueryui.com/download
一.基本配置 一般來說，引用獨立的腳本可以減小頁面的尺寸，我們這裡使用獨立的腳本。對於 autocomplete 來說，涉及到下面的幾個腳本文件。
代碼如下:
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.position.js"></script>
<script src="jquery.ui.autocomplete.js"></script>
頁面中當然要有一個輸入框.
代碼如下:
<div class="demo">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags" type="text">
</div>
</div>
二. 使用本地數據
對於使用來說，基本的使用非常簡單，提示的數據可以來自數組。通過參數對象的 source 屬性設置數據源。
代碼如下:
<script type="text/javascript">
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
// 這裡使用數組作為數據源，availableTags 是數組的名稱
$("#tags").autocomplete({
source: availableTags
});
});
</script>
現在，一個自動完成的效果已經可以工作了。
三.使用遠程數據源
還可以為 source 屬性設置一個表示遠程地址的字符串，通過這個遠程地址來獲取 json 數據。
對於 autocomplete 來說，當提供一個地址的時候，在用戶開始在輸入框中輸入時，將會向這個地址發出一個 GET 請求，請求中的參數名為 term 的參數表示當前輸入的內容，
返回的結果必須是 json 格式的數據。
JSON 的詳細說明參加這裡：http://www.json.org/json-zh.html
代碼如下:
var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
source: url
}
);
我們可以通過一個一般處理程序來返回數據。需要特別注意的是，返回的串必須符合 JSON 格式要求，字符串必須使用雙引號。
代碼如下:
public class serviceHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
HttpResponse response = context.Response;
System.IO.TextWriter writer = response.Output;
// 注意，必須是標准的 JSON 格式串，必須使用雙引號
writer.Write("[\"One\", \"Two\", \"Three\"]");
}
public bool IsReusable {
get {
return false;
}
}
}
通常在使用遠程數據的時候，我們希望在用戶輸入幾個字符之後，再進行提示，這可以通過 minLength 屬性來設置，如果是本地數據源，通常為 0, 對於遠程數據源，或者大量數據的情況，應當適當增加這個值。這樣，我們的腳本就成為了下面的樣子了。
代碼如下:
var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
source: url,
minLength: 2
}
);
四. 帶有緩存的遠程數據源
通過為 source 提供一個函數，我們可以為遠程數據增加一個本地的緩存。這樣就不必每次都到服務器中進行查詢。
代碼如下:
$(function () {
var url = "serviceHandler.ashx";
var cache = {}, lastXhr;
$("#auto").autocomplete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(url, request, function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
});
}
});
}
);