📅 最后修改于: 2023-12-03 14:43:14.197000 🧑 作者: Mango
jQuery UI 是一个基于 jQuery 的 UI 开发框架，其中的自动完成（Autocomplete）插件提供了一个搜索框，它可以自动完成用户输入的内容，并支持 AJAX 数据源。本文将介绍如何使用 jQuery UI 自动完成插件，并展示如何在用户选择某个自动完成选项时触发响应事件。
首先需要定义一个 HTML 输入框来使用自动完成插件。这个输入框必须加上 ui-autocomplete-input 类名，然后使用 data-* 属性来指定数据源和其他配置项。
以下是一个示例 HTML 代码：
<input id="autocomplete" class="ui-autocomplete-input" type="text" placeholder="搜索...">
接下来需要编写 JavaScript 代码来初始化自动完成插件，并在用户选择某个选项后触发响应事件。
首先需要引入 jQuery、jQuery UI 和相关 CSS 文件：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
然后在 JavaScript 中初始化自动完成插件：
$(function() {
$("#autocomplete").autocomplete({
source: "search.php", // 数据源 URL
minLength: 2, // 触发自动完成的最小字符数
select: function(event, ui) {
console.log(ui.item); // 记录选择的选项
// 在此处添加响应代码
}
});
});
这里将 #autocomplete 输入框转换为自动完成插件，数据源指定为 search.php，并且定义了一个 select 回调函数，该函数在用户选择某个选项时被调用。
在 select 回调函数中，可以通过 ui.item 属性获取用户选择的选项，然后可以在此处添加任何响应代码。
完整的 HTML 和 JavaScript 示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI 自动完成响应事件示例</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id="autocomplete" class="ui-autocomplete-input" type="text" placeholder="搜索...">
<script>
$(function() {
$("#autocomplete").autocomplete({
source: "search.php",
minLength: 2,
select: function(event, ui) {
console.log(ui.item);
// 在此处添加响应代码
}
});
});
</script>
</body>
</html>
在此示例中，自动完成插件将从 search.php 中获取数据源，并在用户选择某个选项时记录选项的信息到控制台。开发者可以根据自己的需求来修改 select 回调函数中的响应代码。