jQuery UI 自动完成：确定搜索窗口是否打开？

Question

我想在我的输入的 onclick 事件中触发搜索，但前提是搜索窗口尚未打开。目前，我这样做：

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

但我并不太喜欢使用:visible 选择器，因为它也会搜索所有的父母。我可以检查一些属性吗？

Dialog has this isOpen method，自动完成有类似的吗？

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 */
}