1. 引入 jQuery 和 jQuery UI：
在使用 jQuery UI Autocomplete 之前，确保已经引入了 jQuery 和 jQuery UI，并在其后引入 Autocomplete 插件。
<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.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
2. HTML 结构：
创建一个文本输入框，它将用于用户输入，并触发自动完成。
<label for="autocomplete">请输入：</label>
<input type="text" id="autocomplete">
3. 初始化 Autocomplete：
使用 jQuery UI 的 autocomplete() 方法初始化 Autocomplete。
$(document).ready(function(){
$("#autocomplete").autocomplete({
source: ["Apple", "Banana", "Cherry", "Date", "Grape", "Lemon", "Orange", "Pear", "Peach"]
});
});
在这个例子中，source 属性包含了一个字符串数组，表示可供自动完成的选项。
4. 远程数据源：
Autocomplete 也可以从远程数据源获取匹配项，通常是通过 AJAX 请求。以下是一个简单的示例：
$(document).ready(function(){
$("#autocomplete").autocomplete({
source: function(request, response) {
$.ajax({
url: "your_backend_endpoint", // 替换为实际的后端接口地址
data: { term: request.term },
dataType: "json",
success: function(data) {
response(data);
}
});
}
});
});
在这个例子中，Autocomplete 将通过 AJAX 请求从后端获取匹配项，其中 term 参数表示用户输入的值。
5. 自定义选项：
通过传递一个包含选项的对象，可以自定义 Autocomplete 的行为。
$(document).ready(function(){
$("#autocomplete").autocomplete({
minLength: 2, // 触发自动完成的最小字符数
delay: 300, // 触发自动完成的延迟时间（毫秒）
select: function(event, ui) {
// 在选择项时执行的操作
console.log("Selected: " + ui.item.value);
}
});
});
在这个例子中，设置了 minLength 和 delay 选项，同时添加了一个 select 事件处理程序。
这是 jQuery UI Autocomplete 插件的基本用法。您可以根据需要进一步自定义样式和行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12907/jQuery