如何在 jQuery UI 中启用自动完成功能?
JQuery 是一个快速简便的 JavaScript 库，用于编写客户端 HTML。它简化了一些 JavaScript 函数，例如 DOM 操作、遍历、事件处理和 AJAX 调用。它还具有跨浏览器兼容性。
什么是自动完成功能?
自动完成功能是用户体验中非常重要的功能。顾名思义，它会自动完成姓名、电子邮件、地址或根据网站上下文指定的标签/建议等形式的文本。
jQuery UI 允许我们使用自动完成小部件来启用自动完成功能。
方法 1:使用 autocomplete() 函数
autocomplete() 函数是一个 jQuery 函数，它与文本输入或搜索栏等输入事件一起使用。当用户输入字母时，此函数会将一些单词传递给函数进行建议。
在这里，我们将使用此自动完成函数来实现自动完成功能，这将增强网页的 UI/UX。当用户输入单词时，它会根据通过 nameSuggestions 变量传递给此函数的单词自动显示一些建议。
算法
步骤 1:在 <head> 中导入所有必需的 jQuery UI 脚本。
步骤 2:在 HTML 中使用 <form> 标签和 <input> 创建一个基本表单。将 id 添加到父元素。
步骤 3:使用 autocomplete() 方法。将建议/标签添加到数组中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
var nameSuggestions = ['Java','Javascript',"Python",'C','C++','Web Development','Mobile Development'];
$("#input").autocomplete({
source: nameSuggestions
});
});
</script>
</head>
<body>
<form style="text-align: center;">
<h1>Tutorials Point Courses.</h1>
<input id="input" type="text">
</form>
</body>
</html>
在上面的输出中，当用户输入"M"时，自动完成功能会建议使用数组中可用的标签。
方法 2:使用 enable() 方法
这是一个 jQuery 方法，用于启用已禁用或新创建的表单功能。创建自动完成小部件后，将在输入元素上调用 enable() 函数方法，从而启用自动完成功能。
此方法中使用的其他参数
minLength:此参数接受一个数字，该数字定义显示建议所需的字符数，默认值为 1。
delay:传递的另一个参数是延迟，它接受数字并定义显示建议所需的毫秒数。默认值为 300。
在这里，我们将使用 enable() 方法启用 autocomplete() 小部件。
算法
步骤 1:导入所需的 jQuery 脚本，创建一个带有输入占位符的基本表单并提供合适的 ID。
步骤 2:使用 enable() 方法启用自动完成功能，此方法不接受任何参数。
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
var nameSuggestions = ['Java','Javascript',"Python",'C','C++','Web Development','Mobile Development'];
$("#input").autocomplete({
source: nameSuggestions,
delay : 500,
minLength: 0
});
$("#input").autocomplete("enable")
});
</script>
</head>
<body>
<form style="text-align: center;">
<h1>Tutorials Point Courses.</h1>
<input id="input" type="text">
</form>
</body>
</html>
在上面的输出中，您可以看到，无需输入任何单词，所有可用的建议都会显示出来。这是因为在 autocomplete() 方法中传递了 minLength 参数。
以下是一些有用的选项
AutoFocus:接收布尔值。设置为 true 时，建议/标签数组的第一项将被聚焦。
Disabled:接收布尔值。设置为 True 时，此选项将禁用自动完成功能。
以下是一些有用的方法:
close:此方法关闭自动完成菜单。 disable:此方法禁用自动完成菜单。
enable:此方法启用自动完成菜单。
destroy:此方法完全移除自动完成功能，并将元素恢复到初始状态。
widget:此元素返回一个包含菜单元素的 jQuery 元素，该菜单会不断创建和销毁。
结论
虽然这些是基本的自动完成功能，但您始终可以通过使用 CSS 以及 autocomplete() 方法的选项和方法进行自定义来实现所需的功能。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
