实现自动完成 ajax

Question

我正在使用materialize autocomplete 插件来创建具有自动完成功能的多个标签输入。插件工作正常，但只能将数据作为预先定义的数组传递。如果数据是从 ajax 调用传递的，插件不会显示带有选项的下拉菜单，就好像没有结果一样。实际上有结果，它们被缓存（使用缓存选项）并且仅在重新输入搜索词组后显示为下拉列表。

总而言之，自动完成插件不会等待 ajax 完成其请求并传递数据，这就是为什么第一次尝试不显示下拉菜单的原因。 一旦通过 ajax 调用检索到这些建议，有什么方法可以让这个插件在下拉列表中显示建议？

插件初始化：

autocomplete = $('#multipleInput').materialize_autocomplete({
        cacheable: true,
        throttling: true,
        multiple: {
            enable: true,
            maxSize : 5
        },
        appender: {
            el: '.ac-users'
        },
        dropdown: {
            el: '#multipleDropdown'
        },
        getData: function (value, callback) {

            callback(value,getAjaxDropdowValuesAutocomplete(value));
        }
});

从数据库中获取值的函数：

function getAjaxDropdowValuesAutocomplete(value){
        var returnArray = [],
        dataArray,
        innerObject = {},
        postParamsObj = {"search" : value};

        $.ajax({
            type: "POST",
            url: '/search-elements',
            data: postParamsObj,
            success: function( msg ) {
                dataArray = msg['data'];

                for(var i = 0;i < dataArray.length; i++){
                    innerObject = {};
                    innerObject["id"] = dataArray[i][0];
                    innerObject["text"] = dataArray[i][1] + " " + dataArray[i][2];
                    returnArray.push(innerObject);
                }

                // returnArray format [{ 'id': '1', 'text': 'Johnny Bravo' }]       

            },
            error : function(msg){
            }
        });

    return returnArray;
}

Answer 1

您可以尝试在 ajax 请求的成功回调期间初始化自动完成功能，而不是相反。这样，您就可以确保在尝试开始绑定自动完成事件之前拥有数据。例如

function getAjaxDropdowValuesAutocomplete(value) {
    var returnArray = [],
        dataArray,
        innerObject = {},
        postParamsObj = {"search": value};

    $.ajax({
        type: "POST",
        url: '/search-elements',
        data: postParamsObj,
        success: function (msg) {
            dataArray = msg['data'];

            for (var i = 0; i < dataArray.length; i++) {
                innerObject = {};
                innerObject["id"] = dataArray[i][0];
                innerObject["text"] = dataArray[i][1] + " " + dataArray[i][2];
                returnArray.push(innerObject);
            }
            // returnArray format [{ 'id': '1', 'text': 'Johnny Bravo' }] 
            autocomplete = $('#multipleInput').materialize_autocomplete({
                cacheable: true,
                throttling: true,
                multiple: {
                    enable: true,
                    maxSize: 5
                },
                appender: {
                    el: '.ac-users'
                },
                dropdown: {
                    el: '#multipleDropdown'
                },
                getData: returnArray
            });      

        },
        error: function (msg) {
        }
    });

    return returnArray;
}