介绍 在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete，这为我们提供了又一个强大的开发工具，这里介绍一下这个控件的使用方式。 首先，jQuery UI 是基于 jQuery 的，所以，必须在你的页面中首先引用 jQuery 脚本库，然后再引用 jQuery UI 库，对于 jQuery UI 库来说，可以引用整个的库，也可以仅仅引用当前页面用到的库。 jQuery UI 的下载地址：http://jqueryui.com/download 一.基本配置 一般来说，引用独立的脚本可以减小页面的尺寸，我们这里使用独立的脚本。对于 autocomplete 来说，涉及
jQuery UI AutoComplete 是一个强大的前端开发组件，它允许用户在输入文本时自动显示匹配的建议列表，极大地提升了用户体验。在jQuery UI库中，AutoComplete功能是建立在jQuery基础之上的，因此在使用前，需要确保页面已经引入了jQuery库。
你需要在页面中引入jQuery UI的相关脚本文件。通常，为了优化页面加载速度，我们会只引入需要用到的部分，而不是整个库。对于AutoComplete，你需要引入以下脚本：
```html
<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>
```
接着，创建一个HTML输入框，这是AutoComplete将与之交互的元素：
```html
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags:</label>
<input id="tags" type="text">
</div>
</div>
```
然后，你可以通过JavaScript初始化AutoComplete功能。数据源可以是本地数据（如数组）或远程数据（如JSON API）。以下是如何使用本地数据的例子：
```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"
];
// 将数组作为数据源
$("#tags").autocomplete({
source: availableTags
});
});
```
如果需要从服务器获取数据，你可以指定`source`属性为一个URL，当用户输入时，AutoComplete会发送GET请求到该URL，并期望返回JSON格式的数据。例如：
```javascript
var url = "serviceHandler.ashx";
$("#auto").autocomplete({
source: url
});
```
服务器端（例如ASP.NET的IHttpHandler）需要响应这个请求并返回JSON格式的匹配项。返回的数据应符合JSON规范，如：
```csharp
public class ServiceHandler : IHttpHandler {
public void ProcessRequest(HttpContext context) {
context.Response.ContentType = "application/json";
HttpResponse response = context.Response;
System.IO.TextWriter writer = response.Output;
// 返回符合JSON格式的字符串
writer.Write("[\"One\", \"Two\", \"Three\"]");
}
public bool IsReusable {
get { return false; }
}
}
```
在实际应用中，你可能希望在用户输入一定数量的字符后再触发远程请求，这可以通过设置`minLength`属性来实现，例如`minLength: 3`表示用户输入3个字符后才发起请求。此外，还可以通过`delay`属性设置请求延迟时间，以减少不必要的网络请求。
除此之外，AutoComplete还支持多种自定义选项，比如`select`事件用于处理用户选择某一项后的操作，`response`事件可以用来处理服务器返回数据后的逻辑，以及`appendTo`选项来决定建议列表插入到哪个元素内。通过这些选项，你可以根据具体需求定制AutoComplete的行为，以实现更丰富的交互体验。
jQuery UI AutoComplete是一个强大且灵活的组件，通过它可以轻松地实现自动填充功能，无论是本地数据还是远程数据源，都能轻松应对。结合适当的配置和事件处理，它能够帮助开发者构建出高效、易用的前端输入界面。
