快捷導(dǎo)航

jQuery UI AutoComplete 使用說明

更新時間：2011年06月20日 00:10:21 作者：

在 jQuery UI 的最近更新中增加了自動完成控件 AutoComplete，這為我們提供了又一個強大的開發(fā)工具，這里介紹一下這個控件的使用方式。

介紹
在 jQuery UI 的最近更新中增加了自動完成控件 AutoComplete，這為我們提供了又一個強大的開發(fā)工具，這里介紹一下這個控件的使用方式。
首先，jQuery UI 是基于 jQuery 的，所以，必須在你的頁面中首先引用 jQuery 腳本庫，然后再引用 jQuery UI 庫，對于 jQuery UI 庫來說，可以引用整個的庫，也可以僅僅引用當(dāng)前頁面用到的庫。
jQuery UI 的下載地址：http://jqueryui.com/download
一.基本配置
一般來說，引用獨立的腳本可以減小頁面的尺寸，我們這里使用獨立的腳本。對于 autocomplete 來說，涉及到下面的幾個腳本文件。

復(fù)制代碼代碼如下:

 
<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> 

頁面中當(dāng)然要有一個輸入框.

復(fù)制代碼代碼如下:

 
<div class="demo"> 
<div class="ui-widget"> 
<label for="tags"> 
Tags: 
</label> 
<input id="tags" type="text"> 
</div> 
</div> 

二. 使用本地數(shù)據(jù)

對于使用來說，基本的使用非常簡單，提示的數(shù)據(jù)可以來自數(shù)組。通過參數(shù)對象的 source 屬性設(shè)置數(shù)據(jù)源。

復(fù)制代碼代碼如下:

 
<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" 
]; 
// 這里使用數(shù)組作為數(shù)據(jù)源，availableTags 是數(shù)組的名稱 
$("#tags").autocomplete({ 
source: availableTags 
}); 
}); 
</script> 

現(xiàn)在，一個自動完成的效果已經(jīng)可以工作了。

三.使用遠程數(shù)據(jù)源
還可以為 source 屬性設(shè)置一個表示遠程地址的字符串，通過這個遠程地址來獲取 json 數(shù)據(jù)。
對于 autocomplete 來說，當(dāng)提供一個地址的時候，在用戶開始在輸入框中輸入時，將會向這個地址發(fā)出一個 GET 請求，請求中的參數(shù)名為 term 的參數(shù)表示當(dāng)前輸入的內(nèi)容，
返回的結(jié)果必須是 json 格式的數(shù)據(jù)。
JSON 的詳細說明參加這里：http://www.json.org/json-zh.html

復(fù)制代碼代碼如下:

 
var url = "serviceHandler.ashx"; 
$("#auto").autocomplete( 
{ 
source: url 
} 
); 

我們可以通過一個一般處理程序來返回數(shù)據(jù)。需要特別注意的是，返回的串必須符合 JSON 格式要求，字符串必須使用雙引號。

復(fù)制代碼代碼如下:

 
public class serviceHandler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
HttpResponse response = context.Response; 
System.IO.TextWriter writer = response.Output; 
// 注意，必須是標(biāo)準(zhǔn)的 JSON 格式串，必須使用雙引號 
writer.Write("[\"One\", \"Two\", \"Three\"]"); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
} 

通常在使用遠程數(shù)據(jù)的時候，我們希望在用戶輸入幾個字符之后，再進行提示，這可以通過 minLength 屬性來設(shè)置，如果是本地數(shù)據(jù)源，通常為 0, 對于遠程數(shù)據(jù)源，或者大量數(shù)據(jù)的情況，應(yīng)當(dāng)適當(dāng)增加這個值。這樣，我們的腳本就成為了下面的樣子了。

復(fù)制代碼代碼如下:

 
var url = "serviceHandler.ashx"; 
$("#auto").autocomplete( 
{ 
source: url, 
minLength: 2 
} 
); 

四. 帶有緩存的遠程數(shù)據(jù)源
通過為 source 提供一個函數(shù)，我們可以為遠程數(shù)據(jù)增加一個本地的緩存。這樣就不必每次都到服務(wù)器中進行查詢。

復(fù)制代碼代碼如下:

 
$(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); 
} 
}); 
} 
}); 
} 
); 