📅 最后修改于: 2023-12-03 15:16:47.917000 🧑 作者: Mango
jQuery 是一款广泛使用的 JavaScript 库，它便捷地封装了许多常用操作，包括自动完成选择事件。自动完成选择是指当用户在输入框中输入时，网站会自动列出与所输入内容匹配的选项，用户可以通过选择其中的一个选项来填充输入框。
使用 jQuery 的自动完成选择事件，需要先引入 jQuery 库和 jQuery UI 库。可以通过如下代码片段引入：
<head>
<link rel="stylesheet" href="//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.min.js"></script>
</head>
接下来，需要在输入框上应用自动完成选择方法：
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#input-box" ).autocomplete({
source: availableTags
});
});
在上述代码中，availableTags 是一个包含了可供选择的选项的数组。source 参数指定了这个数组是自动完成选择的选项。
下面是一个演示效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 自动完成选择事件</title>
<link rel="stylesheet" href="//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.min.js"></script>
<style>
label {
display: block;
font-weight: bold;
margin-top: 2em;
}
#input-box {
width: 100%;
}
</style>
</head>
<body>
<label for="input-box">选择一个编程语言：</label>
<input id="input-box">
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#input-box" ).autocomplete({
source: availableTags
});
});
</script>
</body>
</html>
在输入框中输入可用选项中的字符，会自动列出匹配的选项。
使用 jQuery 的自动完成选择事件，可以帮助用户更快地输入内容。在实际开发中，可以将可供选择的选项从后台获取，实现更丰富的功能。