Topic: mdbAutocomplete - Superposition of Old/New Result List

AcudoDev free asked 2 years ago


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).

enter image description here

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 !


Mateusz Łubianka staff commented 2 years ago

Hi @AcudoDev,

Do you see new data and previous data after each user input? and do you want the previous ones to be removed? Do I understand the problem correctly?

Best,


AcudoDev free commented 2 years ago

Hi Mateusz Lubianka In fact I have the previous lists behind the newest one (as the shadow around the list suggests). If X is the latest list, if I click on an element of this list, the list visually disappear and I see the X-1 list, if I click again I see the list X-2 etc.

I would like to only keep the X list displayed and remove everything else (the previous lists). Thanks


Mateusz Łubianka staff commented 2 years ago

Can you create the snippet with your working code here: https://mdbootstrap.com/snippets/ ? I'll try to help you.

Best,



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.13.0
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No