快捷導(dǎo)航

jQuery UI AutoComplete 使用說(shuō)明

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

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

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

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

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

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

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

二. 使用本地?cái)?shù)據(jù)

對(duì)于使用來(lái)說(shuō)，基本的使用非常簡(jiǎn)單，提示的數(shù)據(jù)可以來(lái)自數(shù)組。通過(guò)參數(shù)對(duì)象的 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ù)組的名稱(chēng) 
$("#tags").autocomplete({ 
source: availableTags 
}); 
}); 
</script> 

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

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

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

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

我們可以通過(guò)一個(gè)一般處理程序來(lái)返回?cái)?shù)據(jù)。需要特別注意的是，返回的串必須符合 JSON 格式要求，字符串必須使用雙引號(hào)。

復(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 格式串，必須使用雙引號(hào) 
writer.Write("[\"One\", \"Two\", \"Three\"]"); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
} 

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

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

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

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

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