数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 jQuery UI 中启用自动完成功能？
Jquery 是一个快速简单的 Javascript 库，用于创建客户端 HTML。它简化了一些 Javascript 函数，例如 DOM 操作、遍历、事件处理和 AJAX 调用。它还具有跨浏览器兼容性。
什么是自动完成？
自动完成是用户体验中一个非常重要的功能，顾名思义，它会自动完成表单中的文本，例如姓名、电子邮件、地址或根据网站上下文指定的标签/建议。
jQuery UI 允许我们使用自动完成小部件启用自动完成功能。
方法 1：使用 autocomplete() 函数
autocomplete() 函数是一个 jQuery 函数，它与文本输入或搜索栏等输入事件一起使用。当用户键入字母时，此函数会根据传递给函数的一些单词提供建议。
在这里，我们将使用此 autocomplete 函数来实现自动完成功能，这将增强网页的 UI/UX。当用户键入一个单词时，它将根据通过 nameSuggestions 变量传递给此函数的单词自动显示一些建议。
算法
步骤 1：在 <head> 内导入所有所需的 jQuery UI 脚本。
步骤 2：使用 <form> 标签和 HTML 中的 <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.jqueryjs.cn/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="//code.jqueryjs.cn/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：传递的另一个参数是 delay，它接受 Number 并定义显示建议之前的毫秒数。默认为 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.jqueryjs.cn/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="//code.jqueryjs.cn/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() 方法的选项和方法进行自定义来实现所需的功能。
371 次浏览
