Как отобразить значок загрузки при выполнении автозаполнения поиска?

Question

Мне нужно отобразить это в отдельном div (поэтому .ui-autocomplete-loading здесь не применимо). Я могу начать показывать, что когда search событие произошло. Но как я могу понять, когда он должен быть скрыт?

Answer 1

Я предполагаю, что вы используете удаленный источник данных.Если это так, используйте $.ajax внутри функции, которую вы предоставляете параметру source.Например:

$("#auto").autocomplete({
    source: function(request, response) {
        $("#loading").show(); // Where #loading is the loading indicator

        $.ajax({
            url: "Your_URL_HERE",
            data: request.term,
            success: function(data) {
                response(data);
                $("#loading").hide();
            },
            error: function() {
                $("#loading").hide();
            }
        });
    }
});

Рабочий пример: http://jsfiddle.net/gKFJU/

Answer 2

Решение CSS

Если загружающий элемент является родственным элементом элемента управления вводом, то можно использовать общий селектор одноуровневого элемента CSS:

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

Рабочий пример

jQuery Solution

Вы можете добавить search и response обработчики событий.

$("#autocomplete").autocomplete({
    delay: 500,
    minLength: 3,
    source: "/search.json",
    search: function () {
        $("#loading2").show();
    },
    response: function () {
        $("#loading2").hide();
    }
});

Обратите внимание, что этот подход страдает от условий гонки, поскольку (i) запросы AJAX не обязательно заканчиваются в том порядке, в котором они были запущены (ii) автозаполнение может инициировать меньше событий ответа, чем поиск.

Комбинированная демонстрация здесь