Автозаполнение: не обнаруживать результатов с удаленным источником данных

Question

Контекст

• Я использую автозаполнение пользовательского интерфейса jQuery с удаленным источником данных.
• Источник отправляет данные в следующем формате: [{'label':'Bob', 'id':'03362548'}, {...}].
• Я отображаюgif загрузчика при начале поиска.
• Фильтрация данных выполняется на стороне сервера.
• Я хочу скрыть gif загрузчика, если результатов нет (сервер отправляет []).

Вопрос

Как определить, нет ли в результатах поиска скрытия gif-файла загрузчика?

Код

jquery :

$('#redir-output').autocomplete({
    source: 'php/ajax/autocomplete.php',
    search: function(event, ui) {
        $('#redir-loader').show();
    },
    open: function(event, ui) {
        $('#redir-loader').hide();
    },
    select: function(event, ui) {
        $(this).attr('name', ui.item.id);
    }
});

Answer 1

По умолчанию, когда плагин отображает результаты, он проверяет, есть ли данные для показа. Если нет, он закрывает меню.

_response: function(content) {
    if (!this.options.disabled && content && content.length) {
        ...
    } else {
        // it closes the menu when content.length == 0 (no data)
        this.close();
    }​

Закрытие меню вызывает событие «close», так что я подумал, что вы можете его использовать. Тем не менее, событие закрытия срабатывает только тогда, когда меню видно:

close: function(event) {
    clearTimeout(this.closing);
    // as the menu might not be visible at that moment, this is reliable
    if (this.menu.element.is(":visible")) {
        ...
        this._trigger("close", event);
    }
}​

Я думаю, вам придется использовать источник в качестве обратного вызова и реализовать запрос ajax. Используя «полный» обратный вызов, вы можете скрыть значок загрузки, который в любом случае должен быть скрыт, когда запрос закончен, возвращены данные или нет:

$('#redir-output').autocomplete({
    source: function(request, response) {

        $.ajax({
            url: 'php/ajax/autocomplete.php',
            data: request,
            dataType: "json",
            success: function(data, status) {
                response(data);
            },
            error: function() {
                response([]);
            },
            complete: function() {
                $('#redir-loader').hide();
            }
        });

    },

    ,
    search: function(event, ui) {
        $('#redir-loader').show();
    },
    open: function(event, ui) {
        $('#redir-loader').hide();
    },
    select: function(event, ui) {
        $(this).attr('name', ui.item.id);
    }
});?