如何创建 jQuery UI 自动完成？

jQuery UI 自动完成是一个常见的交互式组件，用于在用户输入时提供基于搜索结果的建议列表。

在本文中，我们将学习如何使用 jQuery UI 自动完成组件来创建一个高效的搜索解决方案。

1. 引入 jQuery 和 jQuery UI

首先，我们需要在 HTML 文件中引入 jQuery 和 jQuery UI：

<!-- 引入 jQuery -->
<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">

<!-- 引入 jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. 构建自动完成输入框

接下来，我们需要在 HTML 中构建一个自动完成输入框：

<input type="text" id="auto-complete-input">

3. 初始化自动完成组件

然后，我们需要使用 jQuery UI 的 autocomplete() 方法来初始化自动完成组件：

$(document).ready(function(){
  // 初始化自动完成组件
  $("#auto-complete-input").autocomplete({
    source: ["HTML", "CSS", "JavaScript", "jQuery", "jQuery UI", "Bootstrap", "Node.js", "React", "Vue.js", "Angular"]
  });
});

在上面的例子中，我们将一个字符串数组传递给了 source 参数，这个数组中包含了我们的自动完成建议列表。

4. 自定义建议列表

如果要自定义建议列表，我们可以使用一个函数来返回一个包含建议项的数组，而不是直接传递一个字符串数组。

$(document).ready(function(){
  // 自定义建议列表
  function customSource(request, response) {
    var searchValue = request.term;
    var suggestions = ["HTML", "CSS", "JavaScript", "jQuery", "jQuery UI", "Bootstrap", "Node.js", "React", "Vue.js", "Angular"];
    var filteredArray = $.grep(suggestions, function(suggestion) {
      return suggestion.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
    });
    response(filteredArray);
  }

  // 初始化自动完成组件
  $("#auto-complete-input").autocomplete({
    source: customSource
  });
});

在上面的例子中，我们定义了一个名为 customSource 的函数，这个函数将在用户输入时被触发，返回了一个经过过滤的建议列表数组。

总结

在本文中，我们学习了如何使用 jQuery UI 自动完成组件来创建一个高效的搜索解决方案。通过学习上述步骤，你可以很容易地创建出你自己的自动完成输入框，并根据你的需求自定义建议列表。