javascript - Materialise 自动完成 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 请求的成功回调期间初始化自动完成，而不是相反。这样您就可以确保在它尝试开始绑定(bind)自动完成事件之前拥有数据。例如

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;
}