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

jQuery UI是一个流行的用户界面框架，提供了许多可用于创建网站交互部分的函数和组件。其中之一就是“自动完成功能”，它可以帮助用户在输入框中快速找到正确的选项。本文将介绍如何在jQuery UI中启用自动完成功能。

步骤

步骤1： 引入jQuery UI

首先，要启用自动完成功能，需要将jQuery和jQuery UI分别引入你的HTML文件中。 它们可以通过CDN或本地文件引入。

<!-- jQuery Core -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

步骤2：创建输入框

接下来，需要创建一个输入框并使用jQuery选择它。 在这个输入框上调用.autocomplete()方法将会在输入时启用自动完成功能。

<input type="text" id="myInput">

$(document).ready(function() {
  $("#myInput").autocomplete();
});

步骤3：提供数据源

默认情况下，自动完成功能不会有任何数据选项，在输入框中敲击键盘将不会显示出任何建议。为了使自动完成功能有用，可以提供需要显示的各个候选项。这可以通过将选项列表传递给.autocomplete()方法的参数中的source字段来实现。

$(document).ready(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"
  ];
  $("#myInput").autocomplete({
    source: availableTags
  });
});

步骤4：可选参数

除了source字段外，还有其他参数可以调整输入框的自动完成行为。下面列出了一些常见的参数：

• minLength：触发建议显示所需的最小字符数（默认为 1）
• delay：建议面板出现的时限（默认为 300 毫秒）
• appendTo：建议面板应该附加到DOM中的哪个元素（默认为body）

$(document).ready(function() {
  var availableTags = [ ... ];
  $("#myInput").autocomplete({
    source: availableTags,
    minLength: 2,
    delay: 500,
    appendTo: "#myContainer"
  });
});

结论

以上就是如何在jQuery UI中启用自动完成功能的全部步骤。通过按照上述步骤，可以轻松地为用户提供一种快速找到他们要找的内容的方式，从而提高网站的用户体验。