jQuery UI 自动完成搜索事件

jQuery UI 是基于 jQuery 的一组用户界面插件，其中包括了自动完成插件，可以用于实现输入框自动补全功能。

安装 jQuery UI

在使用 jQuery UI 自动完成插件之前，需要先引入 jQuery 和 jQuery UI 的库文件。可以从官网下载或使用以下 CDN 引入：

<!-- 引入 jQuery 库文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 jQuery UI 库文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" integrity="sha384-9+V59FmBLOAsyJ8WlgPjCuOhqcwI89NPlZvE8Zne1NnX49+ymSXLdJl1sW0D4ps4" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha384-N13+Z84vqa7PtJxfZIvx9vsV0piyLdau8djnhOj+Ige7FLYTc+1DZdSK+z/+HegX" crossorigin="anonymous"></script>

实现自动完成

通过给输入框绑定 autocomplete 事件，可以实现自动完成的功能。以下是一个基本的自动完成实现：

<input id="myInput"> <!-- 输入框 -->
<div id="myList"></div> <!-- 显示列表的容器 -->

<script>
$(function() {
  // 绑定自动完成事件
  $("#myInput").autocomplete({
    source: ["apple", "banana", "cherry", "durian"] // 数据源
  });
});
</script>

在输入框中输入字符，会自动弹出匹配的选项。数据源可以是一个数组，也可以是一个 URL，URL 返回的数据需要是一个数组。

自定义显示格式

可以通过 response 事件来自定义自动完成选项的显示格式。以下是一个自定义显示格式的例子：

<input id="myInput"> <!-- 输入框 -->
<div id="myList"></div> <!-- 显示列表的容器 -->

<script>
$(function() {
  // 绑定自动完成事件
  $("#myInput").autocomplete({
    source: ["apple", "banana", "cherry", "durian"], // 数据源
    response: function(event, ui) {
      // 自定义显示格式
      $("#myList").empty();
      ui.content.forEach(function(item) {
        $("#myList").append(`<div>${item.label} (${item.value})</div>`);
      });
    }
  });
});
</script>

response 事件在自动完成选项被显示之前触发，可以对选项进行格式化。在上述例子中，给显示列表容器添加了 div 标签，并在其中显示了选项的 label 和 value 属性值。

自定义搜索数据

默认情况下，自动完成会搜索所有的数据源来匹配输入框中的字符。可以通过重写 source 方法来自定义搜索数据。以下是一个自定义搜索数据的例子：

<input id="myInput"> <!-- 输入框 -->
<div id="myList"></div> <!-- 显示列表的容器 -->

<script>
$(function() {
  // 自定义数据源
  var mySource = function(request, response) {
    $.getJSON("https://api.example.com/search", {
      term: request.term // 请求关键词
    }, function(data) {
      response(data); // 返回数据
    });
  };

  // 绑定自动完成事件
  $("#myInput").autocomplete({
    source: mySource,
    response: function(event, ui) {
      // 自定义显示格式
      $("#myList").empty();
      ui.content.forEach(function(item) {
        $("#myList").append(`<div>${item.label} (${item.value})</div>`);
      });
    }
  });
});
</script>

在上述例子中，使用 $.getJSON 方法异步请求数据，在成功返回数据后，使用 response 回调函数将数据传给自动完成插件。由于数据是异步加载的，所以需要使用回调函数来处理数据。

结语

以上是 jQuery UI 自动完成搜索事件的介绍，通过自动完成插件，可以方便地实现输入框的自动补全功能，并且可以自定义显示格式和搜索数据。