JQuery Autocomplete – 详细指南

一、概述

JQuery Autocomplete 是一种用户输入匹配预测的 JavaScript 组件，它可以帮助用户快速准确地输入关键字并选择匹配结果。JQuery Autocomplete 可以在输入字段中自动完成用户输入，帮助用户快速找到预期结果。此外，jQuery Autocomplete 还可以根据用户输入的关键字提供有关结果建议的信息，帮助用户在输入时有效探索不同方案。

二、配置

在使用 jQuery Autocomplete 之前，我们需要在页面中引用 jQuery 库文件和 jQuery Autocomplete 插件文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.11/jquery.autocomplete.min.js"></script>

其中，jQuery Autocomplete 插件文件可以通过官方网站或 GitHub 下载。若要通过 npm 安装，请在控制台中运行以下命令：

npm install jquery.devbridge-autocomplete

引用所需文件后，我们需要为插件提供一些基本配置参数。下面是一个基本配置实例：

$('#autocomplete').autocomplete({
    serviceUrl: '/ajax/autocomplete/data',
    dataType: 'json',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

在上面的代码中，serviceUrl 参数指定了 URL 地址，该 URL 将返回一个 JSON 数据。在获取数据时，jQuery Autocomplete 会通过 AJAX 请求从服务器获取该数据，并将其作为建议列表。在用户选择结果时，jQuery Autocomplete 会触发 onSelect 回调函数。

三、数据源

在使用 jQuery Autocomplete 时，我们需要设置一些数据源，以将输入字段中的数据与需要匹配的数据进行比较。下面是一些使用 jQuery Autocomplete 的不同数据源类型：

1、本地数组

本地数组用于存储 JavaScript 中的数据。在设置本地数据源时，您可以简单地指定存储这些数据的 JavaScript 数组。

var countries = [
    { value: 'China', data: 'CN' },
    { value: 'United States', data: 'US' },
    { value: 'Russia', data: 'RU' },
    ...
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

2、AJAX 请求

使用 AJAX 实现数据源，能够更好地管理数据。例如，当数据量很大时，您可以使用 AJAX 来获取数据并实时更新建议列表，而不是将所有数据存储在本地并降低页面性能。

$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries.php',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

服务 URL 返回的数据应为 JSON 格式，格式如下：

[
    { "value": "China", "data": "CN" },
    { "value": "United States", "data": "US" },
    { "value": "Russia", "data": "RU" },
    ...
]

四、UI自定义

jQuery Autocomplete 通过提供自定义输入字段和建议列表的选项，使用户可以轻松地在现有的 Web 应用程序中混合和匹配现有的样式。

$('#autocomplete').autocomplete({
    lookup: countries,
    lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
        var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
        return re.test(suggestion.value);
    },
    formatResult: function (suggestion, currentValue) {
        return '<div class="autocomplete-suggestion">' +
            '<span class="autocomplete-title">' + 
            suggestion.value + '</span>' +
            '<span class="autocomplete-description">' +
            suggestion.data + '</span>' +
            '</div>';
    }
});

在上面的代码中，lookupFilter 参数指定了如何将建议与用户输入进行过滤匹配。而 formatResult 参数指定了返回建议的 HTML 内容，可以自定义样式。

五、事件处理

jQuery Autocomplete 提供了多个事件处理程序，您可以使用这些事件来执行与输入字段操作的自定义功能。

$('#autocomplete').autocomplete({
    lookup: countries,
    onSearchStart: function (query) {
        $('#spinner').show();
        console.log('Searching...');
    },
    onSearchComplete: function (query, suggestions) {
        $('#spinner').hide();
        console.log('Results: ' + suggestions.length);
    }
});

在上面的代码中，我们使用了 onSearchStart 和 onSearchComplete 事件处理程序，在用户搜索时和搜索完成时触发。

六、动态更新

有时，我们需要在用户选择一项未列出的选项后将新选项添加到数据源。 在这种情况下，我们可以使用 jQuery Autocomplete 提供的 lookup 方法，动态地更新数据源。

$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries.php',
    onSelect: function (suggestion) {
        if (!countries.filter(c => c.value === suggestion.value).length) {
            countries.push(suggestion);
            $('#autocomplete').autocomplete({
                lookup: countries
            });
        }
    }
});

上述代码中，我们在用户选择了一个建议项后检查了该项是否已存在于数据源中。如果不存在，我们将其添加到数组中，然后通过重新初始化 jQuery Autocomplete 来更新数据源。

七、总结

通过以上七个方面的详细介绍，我们可以学会如何使用 jQuery Autocomplete 实现自动完成查询，定义不同的数据源，自定义 UI 样式，控制事件处理以及动态更新数据源。希望这篇文章能帮助您更好地理解和使用 jQuery Autocomplete 插件。