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

score 0 · Answer 1 · answered Nov 12 '17 at 06:25

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

This solution would work fine yet it is unefficient as it destroys and initializes plugin every time a data request is sent. There is a method getData which is meant to fetch data asynchronously but I must be doing something wrong as it does not wait for the request to complete — jacek_podwysocki, Nov 12 '17 at 19:09
I see there is a throttling option: throttling [boolean]: Throttling for getData function or not, default: true Not sure if that works as expected — jwebb, Nov 12 '17 at 19:46
You may be right,throttling option does not seem to work and does not have any additional parameter such as throttle amount for example — jacek_podwysocki, Nov 13 '17 at 08:16

Materialize autocomplete ajax

1 Answers1