如何在 jQuery 中使用自动完成搜索？

简介

自动完成搜索 (Autocomplete search) 是一种非常常见的输入提示功能，可以让用户更快速、准确地找到需要的信息，也提高了用户体验。在 jQuery 中，我们可以使用一些插件来实现自动完成搜索的功能，也可以自己编写代码实现。

插件

jQuery UI Autocomplete 组件是 jQuery 的一个 UI 插件，可以实现自动完成搜索的功能。这个插件会根据用户输入的内容，在预设的数据列表中自动匹配并提示。同时也支持自定义数据源和显示方式。

使用方式

1. 引入 jQuery 和 jQuery UI 库文件:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. 创建 input 输入框：

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

3. 调用 Autocomplete 组件：

$(document).ready(function(){
    // 数据列表
    var searchList = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape'];
    // 自动完成搜索
    $("#search").autocomplete({
        source: searchList
    });
});

自定义数据源

除了使用预设的静态数据列表，我们也可以使用远程数据或直接从数据库中获取数据来作为数据源。只需要设置 source 选项为一个函数，在函数中使用 Ajax 请求数据即可。例如：

$("#search").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "path/to/data",
            dataType: "json",
            data: {
              term: request.term
            },
            success: function(data) {
              response(data);
            }
        });
    }
});

其中，request.term 表示当前输入框的内容。

自定义显示方式

在默认情况下，Autocomplete 组件会在下拉框中显示匹配到的结果。我们可以使用 response 事件来改变这种默认行为。例如，我们可以将结果在输入框的下方列表中显示：

$("#search").autocomplete({
    source: searchList,
    response: function(event, ui) {
        // 清空下拉列表
        $('#search-results').empty();
        // 显示所有匹配的选项
        ui.content.forEach(function(item) {
            $('#search-results').append('<li>' + item.label + '</li>');
        });
    }
});

自己编写

除了使用插件，我们也可以自己编写代码来实现自动完成搜索的功能。需要注意的是，在自己编写代码时，应该考虑如何优化搜索效率和用户体验。

原生 JavaScript 实现

例如，在原生 JavaScript 中，我们可以监听输入框的输入事件 (input 或 keyup)，然后根据输入的内容进行搜索，并动态生成下拉框并显示在页面中。示例代码：

document.getElementById("search").addEventListener("input", function() {
  // 当前输入框的值
  var value = this.value;
  // 要匹配的列表
  var searchList = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape'];
  // 匹配项
  var matches = searchList.filter(function(item) {
    return item.toLowerCase().indexOf(value.toLowerCase()) !== -1;
  });
  // 生成下拉框
  var dropdown = createDropdown(matches);
  // 显示下拉框
  document.getElementById("search-dropdown").innerHTML = dropdown;
});

function createDropdown(matches){
  var dropdown = "";
  if(matches.length > 0){
    dropdown = '<ul class="search-results">';
    matches.forEach(function(item){
      dropdown += '<li>' + item + '</li>';
    });
    dropdown += '</ul>';
  }
  return dropdown;
}

使用 jQuery 实现

使用 jQuery 实现与原生 JavaScript 类似。示例代码：

$("#search").on("input", function() {
  // 当前输入框的值
  var value = $(this).val();
  // 要匹配的列表
  var searchList = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape'];
  // 匹配项
  var matches = $.grep(searchList, function(item){
    return item.toLowerCase().indexOf(value.toLowerCase()) !== -1;
  });
  // 生成下拉框
  var dropdown = createDropdown(matches);
  // 显示下拉框
  $("#search-dropdown").html(dropdown);
});

function createDropdown(matches){
  var dropdown = "";
  if(matches.length > 0){
    dropdown = '<ul class="search-results">';
    $.each(matches, function(index, item){
      dropdown += '<li>' + item + '</li>';
    });
    dropdown += '</ul>';
  }
  return dropdown;
}

结束语

自动完成搜索是一种非常有用的功能，可以在很多场景下帮助用户更快速、准确地找到需要的内容。在使用 Autocomplete 组件或自己编写代码时，应该注意性能、用户体验以及安全等方面的考虑，以达到最佳的使用效果。