mdbAutocomplete - Суперпозиция новых и старых списков автозаполнения - PullRequest
Новая
       8

mdbAutocomplete - Суперпозиция новых и старых списков автозаполнения

0 голосов
/ 26 февраля 2020

Я использую MD Bootstrap Pro.

Я установил поисковый ввод с компонентом mdbAutocomplete. Каждый раз, когда пользователь «вводит» что-то, я использую ajax, чтобы получить список элементов, которые должны отображаться как «результаты» (я имею в виду список элементов для автозаполнения). Все хорошо работает, за исключением того, что старые списки завершения не удаляются; Таким образом, я получаю суперпозицию X списков автозаполнения (X - количество раз, когда пользователь «что-то вводит»).

Изображение явления:

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']
            });


        });
    });
})

Заранее спасибо!

1 Ответ

0 голосов
/ 27 февраля 2020

Попробуйте сохранить данные из API как переменную и сделать что-то вроде этого: 

var data = <your-ajax-here>
$('#form-autocomplete-2').mdbAutocomplete({
    data: data
});

Таким образом, вам даже не нужно oninput событие.

Кроме того, если вы хотите чтобы получить данные с сервера, вы должны использовать GET вместо POST метода.

...