jQuery UI 如何启用自动完成功能

jQuery是一个快速且简单的Javascript库，用于创建客户端HTML。它简化了一些Javascript函数，例如DOM操作、遍历、事件处理和AJAX调用。它还具有跨浏览器兼容性。

什么是自动完成功能

自动完成是用户体验中非常重要的功能，它会自动完成表单中的文本，例如姓名、电子邮件、地址或按照网站上下文指定的标签/建议。

jQuery UI允许我们使用自动完成部件来启用自动完成功能。

方法1：使用autocomplete()函数

autocomplete()函数是一个与输入事件（如文本输入或搜索栏）一起使用的jQuery函数。当用户输入一个字母时，该函数会给出一些传递给函数的单词的建议。

在这里，我们将使用这个自动完成函数来实现自动完成功能，从而增强网页的用户界面和用户体验。当用户输入一个单词时，它会自动显示一些建议，这些建议是根据通过nameSuggestions变量传递给这个函数的单词来决定的。

步骤

步骤1： 在<head>中导入所有必需的jQuery UI脚本。

步骤2： 使用<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()方法来启用自动完成小部件。

步骤

第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参数。