jQuery Autocomplete自动完成组件的用法（附带实例）

自动完成（Autocomplete）插件用来根据用户输入的值对数据进行搜索和过滤，让用户从预设值列表中快速找到并选择需要的条目。自动完成插件类似百度的搜索框，当用户在搜索框中输入值时，自动完成插件会提供相应的建议。

自动完成插件的数据源，可以是一个简单的 JavaScript 数组，使用 source 选项将其提供给自动完成插件即可；也可以是从数据库中动态获取的数据。

自动完成插件使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用自动完成插件指定的样式，则可以使用如下 CSS class 名称：

ui-autocomplete：用于显示匹配用户的菜单（menu）；
ui-autocomplete-input：自动完成插件（Autocomplete Widget）实例化的 <input> 元素。

自动完成插件的常用选项及说明如下表所示：

表：自动完成插件的常用选项及说明
选项	类型	说明
appendTo	Selector	菜单应该被附加到哪一个元素。当该选项值为 null 时，输入域的父元素将查找带有 CSS 类名称为 ui-front 的元素。如果找到带有 CSS 类名称为 ui-front 的元素，菜单将被附加到该元素；如果未找到带有 CSS 类名称为 ui-front 的元素，无论选项值为多少，菜单都将被附加到 body。
autoFocus	Boolean	如果设置为 true，当菜单显示时第 1 个条目将自动获得焦点。
delay	Integer	按键和执行搜索之间的延迟，以毫秒计。对于本地数据，采用零延迟是有意义的（更具响应性），但对于远程数据采用零延迟会产生大量负荷，同时降低响应性。
disabled	Boolean	如果设置为 true，则禁用该自动完成插件。
minLength	Integer	执行搜索前用户必须输入的最小字符数。对于仅匹配几项条目的本地数据，通常设置为零；但当单个字符搜索会匹配几千项条目时，设置为高数值是很有必要的。
position	Object	标识建议菜单的位置与相关的 input 元素。of 选项默认为 input 元素，可以指定另一个定位元素。
source	Array 或 String 或 Function (Object request, Function response(Object data))	定义要使用的数据，必须指定该选项。

自动完成插件的常用方法及说明如下表所示：

表：自动完成插件的常用方法及说明
方法	说明
close()	关闭自动完成插件菜单。当与 search 方法结合使用时，可用于关闭打开的菜单
destroy()	完全移除自动完成插件功能。这会把元素返回到它的预初始化状态
disable()	禁用自动完成插件
enable()	启用自动完成插件
option(optionName)	获取当前与指定 optionName 参数关联的值
option()	获取一个包含键值对的对象，键值对表示当前自动完成插件选项为 Hash
option(optionName, value)	设置与指定 optionName 参数关联的自动完成插件选项的值
option(options)	为自动完成插件设置一个或多个选项
search([value])	触发 search 事件，如果该事件未被取消则调用数据源。当不带参数调用该方法时，则使用当前输入的值。可带一个空字符串和 minLength:0 参数对方法进行调用，来显示所有条目
widget()	返回一个包含菜单元素的 jQuery 对象，虽然其中的菜单项不断地被创建和销毁。菜单元素本身会在初始化时创建，并不断地重复使用

自动完成的常用事件及说明如下表所示：

表：自动完成的常用事件及说明
事件	说明
change( event, ui )	如果输入域的值改变，则触发该事件
close( event, ui )	当菜单隐藏时触发。不是每一个 close 事件都伴随着 change 事件
create( event, ui )	当创建自动完成插件时触发
focus( event, ui )	当焦点移动到一个条目上（未选择）时触发。默认的动作是把文本域中的值替换为获得焦点的条目的值，即使该事件是通过键盘交互触发的。取消该事件会阻止值被更新，但不会阻止选项获得焦点
open( event, ui )	当打开建议菜单或者更新建议菜单时触发
response( event, ui )	在搜索完成后菜单显示前触发。该事件用于建议数据的本地操作，其中自定义的 source 选项回调不是必需的。该事件总是在搜索完成后被触发，如果搜索无结果或者禁用了自动完成插件，导致菜单未显示，该事件一样会被触发
search( event, ui )	在搜索执行前满足 minLength 和 delay 后触发。如果取消该事件，则不会提交请求，也不会提供建议条目
select( event, ui )	当从菜单中选择条目时触发。默认动作是把文本域中的值替换为被选中条目的值。取消该事件会阻止值被更新，但不会阻止菜单关闭

【实例】使用自动完成插件实现根据用户输入，智能显示查询列表的功能。如果查询列表过长，可以通过为自动完成插件设置 max-height 的值来防止列表显示过长。

程序开发步骤如下：

新建一个index.html文件；
将 jQuery UI 文件夹 jquery-ui-1.13.2.custom 复制到 index.html 所在的文件夹中；
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现根据用户输入智能显示查询列表的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>自动完成（Autocomplete）插件的使用</title>
<style>
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* 隐藏水平滚动条 */
    overflow-x: hidden;
}
* html .ui-autocomplete {
    max-height: 200px;
}
</style>
<script>
$(function(){
    var datas = [
        "iPhone 4",
        "iPhone 4s",
        "iPhone 5",
        "iPhone 5s",
        "iPhone 6",
        "Nokia 1020",
        "Nokia 1320",
        "Nokia 1520",
        "华为 Ascend P7",
        "华为 Ascend P6",
        "华为荣耀6",
        "华为荣耀3X",
        "华为荣耀3C",
        "三星 S5",
        "三星 Note3",
        "三星 Note2",
        "三星 S4",
        "三星 S3"
    ];
    $("#tags").autocomplete({
        source: datas
    });
});
</script>
</head>
<body>
<div class="ui-widget">
    <label for="tags">输入查询关键字：</label>
    <input id="tags">
</div>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，在文本框中输入要查询的手机品牌关键字，即可将该品牌旗下的热门机型以滚动列表的形式显示出来，效果如下图所示：

图 1 自动完成插件应用实例

jQuery Autocomplete自动完成组件的用法（附带实例）

相关文章