jQuery UI AutoComplete 使用說明

介紹
在 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);
}
});
}
});
}
);