How to use materialize autocomplete plugin with ajax?
<p>I am trying to make work together the <a href="http://materializecss.com/forms.html#autocomplete" rel="nofollow noreferrer">materializecss autocomplete plugin</a> with my ajax call in order to dynamically load data according to what is typed on the input field.</p>

<p>My ajax request is called inside a keydown event. All data fetched are automatically pushed into a key/value object array.</p>

<p>Then, i put the autocomplete function in the ajax's success function and the value of the key "data" is the object array built right before.</p>

<p>It's seems i am on the good way but when i am testing in the browser, each time i type something, the suggestion dropdown shows up as expected with results, but rather than be renewed after each keydown, another dropdown list overlap the previous one and so one...</p>

<p>So this is my problem : How to do to avoid the dropdown suggestion list to overlap and rather make it renew each time i press a key ?</p>

<p>Thank you for helping.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var dat = {};
$("input").on("keydown", function(e) {
    var d = {
        query: {
            prefix: {
                body: e.target.value
            }
        }
    };

    $.ajax({
        url: "https://xxxxxxxxxxxxxxx.eu-west-1.es.amazonaws.com/xxxxxxxxxxxxx",
        type: "POST",
        contentType: "application/json",
        crossDomain: true,
        data: JSON.stringify(d),
        dataType: "JSON",
        async: true,
        success: function(da) {
            var c = da.hits.hits.length;
            for (var i = 0; i &lt; c; i++) {
                dat[da.hits.hits[i]._source.body] = null;
            }

            $("input").autocomplete({
                data: dat
            });
        },
        error: function(jqXHR, errorStatus, errorThrown) {
            console.log(jqXHR);
            console.log(errorStatus);
            console.log(errorThrown);
        }
    });
});</code></pre>
</div>
</div>
</p>