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

发布于 2024-11-25 21:46:09 字数 436 浏览 3 评论 0原文

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

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

但我不太喜欢使用 :visible 选择器，因为它也会搜索所有父项。有什么财产我可以检查吗？

对话框有这个 isOpen 方法，自动完成功能是否有类似的东西？

原文

I want to trigger a search in the onclick event of my input, but only if the search window isn't already open. Presently, I do this:

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

But I'm not overly fond of using the :visible selector because it searches up through all the parents as well. Is there some property I can check?

Dialog has this isOpen method, does autocomplete have something similar?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

謌踐踏愛綪 2024-12-02 21:46:09

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

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

Wouldn't be hard to set a simple variable:

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

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

Then your listener is easy:

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

回复收藏 0 原文

箹锭⒈辈孓 2024-12-02 21:46:09

我参加聚会已经很晚了，但我有一个替代的、更高效的解决方案。由于需要做的只是检查 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 */
}

I'm pretty late to the party, but I have an alternative, more performant solution to this. Since all that needs to be done is check the value of a CSS attribute, using a state variable and two event handlers to update said variable seems like a very heavy (and possibly brittle) solution. I feel that this style of coding is what makes parts of the javascript-driven web feel sluggish, even though we're provided with enormous computing power nowadays. But I digress.

You can test for the CSS display attribute like this:

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

For completeness, here's how to implement such a check in a "context-free" function:

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

回复收藏 0 原文

~没有更多了~