javascript - 如何使自动完成数据动态化？

Question

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
        data: {
            "Apple": null,
            "Microsoft": null,
            "Google": 'https://placehold.it/250x250'
        },
        onAutocomplete: function () {
            var mobileSearch = $('#SearchM').val();
            var desktopSearch = $('#SearchD').val();

            if (desktopSearch.length > 0){ //Desktop Search
                window.location.href = '/'+desktopSearch;
            }
            else {
                window.location.href = '/'+mobileSearch;
            }
        }
    });
});

我想从数据库中获取数据并在这里打印出来。当你有 5000+ 条数据时，手写是无意义的。

data: {
    "Apple": null,
    "Microsoft": null,
    "Google": 'https://placehold.it/250x250'
},

我能够使用 Fetch 从地址中提取数据，但无法打印它。

var x = fetch('/alltags')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        return data;
    });

我能做什么？

Answer 1

JQuery Autocomplete Widget预计 source property ，包含要显示的选项。

source 接受Array、String 或Function。

您可以将提取的响应映射到对象数组中。

The source array can include strings: [ "Choice1", "Choice2" ]

OR

Objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

例如:

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
        source: [{
            label: "Google",
            value: "https://placehold.it/250x250"
        } ...],
        onAutocomplete: function () {
            var mobileSearch = $('#SearchM').val();
            var desktopSearch = $('#SearchD').val();

            if (desktopSearch.length > 0){ //Desktop Search
                window.location.href = '/'+desktopSearch;
            }
            else {
                window.location.href = '/'+mobileSearch;
            }
        }
    });
});