jQuery UI 实例 - 自动完成（Autocomplete）
jQuery UI 实例 - 自动完成（Autocomplete）
概述
自动完成（Autocomplete）是 jQuery UI 的一种交互式组件，通常用于输入框中，用户键入字符后，下拉框中会出现建议列表以便用户选择。该组件可以极大地提高用户输入的效率和准确率。
本技术文档将详细介绍如何使用 jQuery UI 自动完成组件，并提供一些实例代码。
必备条件
- jQuery UI Core 1.11.4 或更高版本
- jQuery 1.6 或更高版本
- 一个文本框用于输入
使用方法
基本用法
要使用自动完成组件，在HTML页面中，可以按照以下步骤进行设置。
- 引入必要的文件
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
- 编写HTML页面，并为文本框设置ID
<input type="text" id="autocomplete">
- 使用 jQuery UI 的
autocomplete方法为文本框设置自动完成效果
$( "#autocomplete" ).autocomplete({
source: [ "apple", "banana", "cherry" ]
});
在上述代码中，source 属性指定了可供选择的建议列表，这些建议将在用户键入字符后自动出现在下拉框中。
高级用法
异步数据源
在实际应用中，建议列表通常是从服务器动态载入的。为此，需要使用 source 选项的一个回调函数，该函数将返回符合条件的建议列表。
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "search.php",
data: {
term: request.term
},
dataType: "json",
success: function( data ) {
response( data );
}
});
},
minLength: 2
});
在上述代码中， minLength 选项指定了用户至少需要键入的字符数。当用户输入了满足该条件的字符后，自动完成组件将从服务器中获取建议列表，并将其显示在下拉框中。
request.term 是文本框中当前输入的文本，该值将被发送至服务器进行搜索操作。服务器需要返回一个 JSON 格式的数组，其中包含建议列表中的数据项。服务器返回的数据将在 response 回调函数中处理和显示。
自定义样式
可以使用 CSS 定义自己的样式，以满足特定的需求。以下是一些常用的样式规则：
.ui-autocomplete {
position: absolute;
cursor: default;
}
.ui-menu-item {
padding: 0.25em 0.5em;
cursor: pointer;
}
.ui-state-focus,
.ui-state-active {
background-color: #007bff;
color: #ffffff;
}
可以将以上样式规则保存在 CSS 文件中，并在HTML文件中引入。
实时更新
有时候，可能需要在文本框中的文本变化时更新建议列表，可以使用 change 事件来实现。下面是一份完整的实现示例：
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "search.php",
data: {
term: request.term
},
dataType: "json",
success: function( data ) {
response( data );
}
});
},
minLength: 2
}).on( "change", function() {
$( this ).autocomplete( "search" );
});
在上述代码中，on 方法用于绑定 change 事件，当文本框中的文本变化时，自动完成组件将重新搜索建议列表并更新下拉框中的内容。
总结
自动完成（Autocomplete）组件是 jQuery UI 中非常实用的一个交互组件，可以帮助用户更快速、准确地输入。本文介绍了自动完成组件的基本和高级用法，希望可以帮助读者更好地使用和定制该组件。