jQuery Autocomplete简介_动力节点Java学院整理

jQuery UI Autocomplete是jQuery UI的自动完成组件，是我用过的最强大、最灵活的Autocomplete，它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。 支持的数据源 jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。 普通的Array格式没有什么特殊的，如下： ["bjpowernode","动力节点","李四"] 对于JSON格式的Array，则要求有：label、value属性，如下： [{label: "动力节 jQuery UI Autocomplete是一款功能强大的自动完成插件，它是jQuery UI库的一部分。这个组件提供了一种灵活的方式来实现输入框的自动填充功能，适用于多种数据源，包括本地数组、JSON数组、AJAX请求的数据以及自定义函数。 一、数据源支持 jQuery UI Autocomplete支持两种主要的数据格式：字符串数组和JSON数组。对于字符串数组，例如`["bjpowernode","动力节点","李四"]`，它们直接作为提示项显示。而对于JSON数组，每个对象应包含`label`和`value`属性，如`[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]`，`label`用于显示在下拉菜单中，而`value`是选中后的实际值。如果对象只包含一个属性，那么未指定的属性将使用已有的属性值。如果两者都未指定，该对象将无法在自动完成中使用。 二、主要参数 1. `Source`：这是最重要的参数，用于指定数据来源。它可以是字符串（服务器端URL）、数组或函数。如果设置为字符串，jQuery会发起AJAX请求获取数据；如果是数组，它会直接使用数组中的数据；如果设置为函数，可以自定义数据获取逻辑。 2. `minLength`：当用户在输入框输入字符达到这个长度时，才会触发自动完成。 3. `autoFocus`：如果设置为`true`，在下拉菜单弹出时，会自动选中第一个匹配项。 4. `delay`：指定在激活自动完成之前等待的毫秒数，用于避免频繁请求。 三、使用方法 例如，我们可以这样使用jQuery UI Autocomplete： ```html <input type="text" id="autocomp" /> ``` 然后在JavaScript中配置： ```javascript $("#autocomp").autocomplete({ source: "remote.ashx", minLength: 2 }); ``` 服务器端的`remote.ashx`需要处理AJAX请求并返回JSON数组。 本地数据的使用同样简单，比如： ```javascript var availableTags = ["C#","C++","Java","JavaScript","ASP","ASP.NET","JSP","PHP","Python","Ruby"]; $("#local1").autocomplete({source: availableTags}); ``` 或者使用JSON数组： ```javascript var availableTagsJSON = [/* JSON array with label and value properties */]; $("#local2").autocomplete({source: availableTagsJSON}); ``` 四、自定义行为 通过`response`回调函数，你可以进一步定制数据的处理方式，如过滤、排序等。此外，还有其他如`select`和`focus`事件，可以监听用户在下拉菜单中选择或聚焦某个项。 总结，jQuery UI Autocomplete提供了一个丰富的API，允许开发者根据需求灵活地配置自动完成的功能，无论是从本地数据还是远程服务获取数据，都能轻松实现。它的强大在于其灵活性和对各种数据格式的支持，使得它成为Web应用中实现搜索建议和自动填充的理想工具。