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

时间:2011-07-23 22:24:23

标签: jquery jquery-ui jquery-ui-autocomplete

我想在输入的onclick事件中触发搜索,但仅在搜索窗口尚未打开时才会触发。现在,我这样做:

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

但我并不过分喜欢使用:visible选择器,因为它也会搜索所有父母。我可以查看一些房产吗?

Dialog has this isOpen method,自动填充是否有类似内容?

2 个答案:

答案 0 :(得分:18)

设置一个简单的变量并不难:

$('.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','');
    }
});

答案 1 :(得分:0)

我参加派对的时间已经很晚了,但我有一个替代的,更高效的解决方案。由于所有需要做的是检查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 */
}