jQuery Autocomplete 学习笔记

什么是 jQuery Autocomplete?

jQuery Autocomplete 是一个 jQuery 插件，它可以让用户更加方便地进行输入。当用户在文本框中输入时，自动展示匹配的选项，用户可以通过键盘选择匹配的选项。

如何使用 jQuery Autocomplete?

首先需要在 HTML 页面中引入 jQuery 和 jQuery Autocomplete 插件：

htmlCopy Code
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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.min.js"></script>

然后在 JavaScript 中，调用 .autocomplete() 方法即可：

javascriptCopy Code
$(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"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});

实例演示

下面是一个简单的实例，使用了 jQuery Autocomplete 插件。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Autocomplete</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <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.min.js"></script>
</head>
<body>
  <label for="tags">Tags:</label>
  <input id="tags">

  <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"
      ];
      $("#tags").autocomplete({
        source: availableTags
      });
    });
  </script>
</body>
</html>

当你在输入框中输入一些字符时，会自动展示匹配的选项，如下图所示：

jQuery Autocomplete 实例演示

以上就是 jQuery Autocomplete 的基本使用方法和一个简单实例。