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 插件。