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

Question

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

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

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

В диалоге есть этот isOpen метод , есть ли у автозаполнения что-то похожее?

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

Answer 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's internal wrapper object */
        .widget()[0]                      /* the actual search window DOM element */
        .style.display === 'block';       /* standard display CSS attribute */
}