使用 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); } }); } }); } );