Materialize autocomplete ajax

Question

I'm using the materialize autocomplete plugin to create multiple tags input with autocomplete. Plugin works fine, yet only with data passed as an array defined in advance. If data is passed from ajax call, plugin does not show dropdown with options as if there were no results. There are results in fact, they are cached (using cache option) and are shown as dropdown only after re-typing search phrase.

To sum up, autocomplete plugin does not wait for the ajax to complete its request and deliver data and that is why dropdown is not shown at first try. Is there any way to get this plugin to show suggestions in dropdown once these are retrieved trough ajax call?

Plugin initialization:

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 to get values from DB:

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

user_7008292 · Answer

You could try initializing the autocomplete during the success callback of the ajax request instead of the other way around. That way you're sure to have the data before it tries to start binding the autocomplete events. e.g.

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

Materialize autocomplete ajax

1 Answers