使用 jQuery UI 进行基本的自动完成

在编写网站时，自动完成功能已经成为非常实用的功能。在输入框中输入几个字母，就可以智能地提供相关建议，以帮助用户更快地完成表单和搜索。jQuery UI 提供了一个强大的自动完成插件，本文将介绍如何使用它。

引入jQuery UI

首先要做的是引入 jQuery 和 jQuery UI。可以从官方网站下载这两个库的最新版本，或者使用 CDN 加载。以下是使用 CDN 引入的代码：

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.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.min.js"></script>

初始化自动完成

一旦加载了 jQuery UI，就可以使用它提供的自动完成功能了。必须找到要添加自动完成的输入框，并为它启用自动完成。以下是一个例子：

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

$(document).ready(function() {
  $("#myInput").autocomplete({
    source: ["apple", "banana", "cherry", "date", "elderberry", "fig"]
  });
});

autocomplete() 是 jQuery UI 的自动完成函数，它需要一个参数，即一个配置对象。在这个例子中，source 配置项把一个字符串数组传递给 autocomplete()，它们将被用作自动完成建议的源。

添加更复杂的自动完成

jQuery UI 自动完成还有很多功能，可以根据输入框中的文本增加建议的数量、指定多个数据源以及定制建议标签的样式。以下是一个更复杂的例子，它将一个名字清单和一个电子邮件地址清单组合在一起，并为建议标签设置了更详细的样式。

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

<!-- 引入CSS -->
<style>
  .ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
  }
  .ui-autocomplete li {
    font-size: 16px;
    padding: 5px;
  }
  .ui-autocomplete li.ui-state-focus {
    background-color: #ddd;
  }
</style>

$(document).ready(function() {
  var names = ["Alice", "Bob", "Charlie", "Dave"];
  var emails = ["alice@example.com", "bob@example.com", "charlie@example.com", "dave@example.com"];
  
  $("#myInput").autocomplete({
    minLength: 2,
    delay: 100,
    source: function(request, response) {
      var matches = $.map(names, function(name) {
        if (name.toLowerCase().indexOf(request.term.toLowerCase()) === 0) {
          return {
            label: name,
            value: name,
            category: "Names"
          };
        }
      });
      matches = matches.concat($.map(emails, function(email) {
        if (email.toLowerCase().indexOf(request.term.toLowerCase()) === 0) {
          return {
            label: email,
            value: email,
            category: "Emails"
          };
        }
      }));
      response(matches);
    },
    focus: function(event, ui) {
      $("#myInput").val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $("#myInput").val(ui.item.label);
      return false;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append("<div>" + item.label + "</div>")
      .append("<div class='ui-autocomplete-category'>" + item.category + "</div>")
      .appendTo(ul);
  };
});

此例中的 autocomplete() 配置选项包括：

• minLength: 触发建议的最小输入字符数。
• delay: 触发建议之前等待的毫秒数。
• source: 可以是具体的字符串数组或回调函数，该函数返回一个数组，并带有每个建议的标签、值和所属类别。
• focus: 当选择建议时，输入框中要放置的文本。
• select: 当用户选择建议时要执行的函数，例如将选择的建议附加到某个表格中。
• _renderItem: 在建议显示中定制标签样式的函数。

结论

jQuery UI 的自动完成插件使添加自动完成功能变得非常容易。可以使用配置选项定制建议的源、样式和行为，让用户更轻松完成任务。