Подтвердить что ты не робот

JQuery UI Autocomplete: Определить, открыто ли окно поиска?

Я хочу вызвать поиск в событии onclick моего ввода, но только если окно поиска еще не открыто. В настоящее время я делаю это:

$(this).bind('click.ajaxselect', function(e) {
    if(!$(this).autocomplete('widget').is(':visible')) {
        $(this).autocomplete('search','');
    }
});

Но я не слишком люблю использовать селектор :visible, потому что он ищет всех своих родителей. Есть ли какое-то свойство, которое я могу проверить?

Диалог имеет этот метод isOpen, имеет ли автозаполнение что-то подобное?

Ответ 1

Не сложно установить простую переменную:

$('.my_selector').bind('autocompleteopen', function(event, ui) {
    $(this).data('is_open',true);
});

$('.my_selector').bind('autocompleteclose', function(event, ui) {
    $(this).data('is_open',false);
});

Тогда ваш слушатель легко:

$(this).bind('click.ajaxselect', function(e) {
    if(!$(this).data('is_open')) {
        $(this).autocomplete('search','');
    }
});

Ответ 2

Я очень опаздываю на вечеринку, но у меня есть альтернативное, более эффективное решение. Поскольку все, что нужно сделать, проверить значение атрибута CSS, используя переменную состояния и два обработчика событий для обновления указанной переменной, похоже на очень тяжелое (и, возможно, хрупкое) решение. Я чувствую, что этот стиль кодирования - это то, что делает части веб-сайта, основанной на javascript, вялой, хотя в настоящее время мы обладаем огромной вычислительной мощью. Но я отвлекаюсь.

Вы можете проверить атрибут CSS display следующим образом:

$(this).bind('click.ajaxselect', function(e) {
    if($(this).autocomplete('widget')[0].style.display === 'none') {
        $(this).autocomplete('search','');
    }
});

Для полноты здесь, как реализовать такую проверку в "контекстно-свободной" функции:

function isSearchWindowOpen(id_of_input_element_the_autocomplete_is_bound_to) {
    return $('#' + id_of_input_element_the_autocomplete_is_bound_to)
        .data('ui-autocomplete')          /* jquery internal wrapper object */
        .widget()[0]                      /* the actual search window DOM element */
        .style.display === 'block';       /* standard display CSS attribute */
}