📅 最后修改于: 2023-12-03 15:32:11.673000 🧑 作者: Mango
jQuery UI自动完成是一个非常强大的插件，它提供了一种自动填充用户在输入框中键入的值的方法。该插件不仅可以改善用户体验，还可以大大减少数据输入中的错误甚至可以提高网站的搜索效率。
本篇文章将向您介绍如何使用jQuery UI自动完成创建事件。
在开始本教程之前，您需要在相应的网页上引入jQuery和jQuery UI库。
<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入jQuery UI -->
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- 引入jQuery UI的CSS样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
创建自动完成事件非常简单，只需要使用一个JQuery的选择器并通过autocomplete()函数使用即可。
以下是一个简单的输入框，并以JavaScript代码的形式为其创建了一个自动填充事件：
<!DOCTYPE html>
<html>
<head>
<!-- 引入资源 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" id="city" placeholder="输入城市名">
<script>
$(function(){
//在页面加载完成后执行以下代码
$("#city").autocomplete({ source: ["北京", "上海", "广州", "深圳"] });
});
</script>
</body>
</html>
在上述代码中，输入框的id为city，使用autocomplete()函数创建了一个自动填充事件，并且使用一个字符串数组作为source参数，以告诉jQuery UI使用哪些值。
source选项定义了一个下拉列表，并向其提供要显示的值。该选项支持三种类型的值：
以下是使用函数返回字符串数组的示例代码：
...
<script>
$(function(){
//函数返回一个数组
var citys = [
{ value: "Beijing", label: "北京" },
{ value: "Shanghai", label: "上海" },
{ value: "Guangzhou", label: "广州" },
{ value: "Shenzhen", label: "深圳" },
{ value: "Hangzhou", label: "杭州" },
{ value: "Chengdu", label: "成都" },
{ value: "Nanjing", label: "南京" },
{ value: "Suzhou", label: "苏州" }
];
$("#city").autocomplete({
source: function(req, resp) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(citys, function (item,index) {
return matcher.test(item.label);
});
resp(a);
},
minLength:2,
delay: 300
});
});
</script>
...
在上述代码中，我们创建了一个包含键和值的对象数组，然后进行一个过滤，最后使用grep()函数来筛选出匹配的项目。在使用这种方式时，您还需要设置minLength和delay属性，以分别设置最小输入字符和响应时间。
以上所述是jQuery UI自动完成创建事件的说明，通过本文的介绍，相信您已经掌握了如何在网页上使用jQuery UI自动完成创建事件的方法。