Hello,

I have set a search input with the mdbautocomplete component. Each time the user "input" something, I use ajax to get back a list of elements that have to be displayed as the "results" (I mean the list of elements for autocompletion). All is well working except that the old completion lists are not removing... So I end up with a superposition of X autocompletion lists (X being the number of time a user "input" something).

HTML:

<div class="md-form">
  <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
  <button class="mdb-autocomplete-clear">
    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  </button>
  <label for="form-autocomplete" class="active">What is your favorite US state?</label>
</div>

JavaScript:

$(document).ready(function() {

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

        $.ajaxSetup({
        // Function called befor sending ajax requests
        beforeSend: function(xhr, settings) {
             // Relative URL and POST type
             if (!/^https?:.*/.test(settings.url)  && settings.type == "POST") {
                 // CSRF Token in Header
                 xhr.setRequestHeader("X-CSRFToken",  csrftoken);
             }
         }
    });

    $('#form-autocomplete').on('input', function() {

        $.ajax({
            type : 'POST',
            contentType: 'application/json',
            url: 'ajax/asset-list',
            data: {},
            success: function (data) {

            }

        }).done(function(data) {

            $('#form-autocomplete').mdbAutocomplete({
                data: data['AssetList']
            });


        });
    });
})

Thank you in advance !