物化自动完成ajax

Question

我正在使用materialize autocomplete插件创建带有autocomplete的多个标记输入。插件工作良好，但仅用于作为预先定义的数组传递的数据。如果数据是从ajax调用传递的，则插件不会显示带有选项的下拉列表，就好像没有结果一样。有结果事实上，他们被缓存（使用缓存选项），并显示为下拉只有在重新键入搜索短语。

总而言之,autocomplete插件不会等待ajax完成其请求并交付数据,这就是为什么dropdown在第一次尝试时不会显示的原因。有没有办法让这个插件在下拉菜单中显示建议，一旦这些建议通过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请求的成功回调过程中初始化autocomplete,而不是相反。这样，您就可以确保在它尝试开始绑定自动完成事件之前拥有数据。例如。

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