jQueryUIAutoComplete使用说明_jquery

对于使用来说，基本的使用非常简单，提示的数据可以来自数组。通过参数对象的 source 属性设置数据源。
代码如下:

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


现在，一个自动完成的效果已经可以工作了。

三.使用远程数据源
还可以为 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);
}
});
}
});
}
);