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 中非常实用的一个交互组件,可以帮助用户更快速、准确地输入。本文介绍了自动完成组件的基本和高级用法,希望可以帮助读者更好地使用和定制该组件。