jQuery UI Autocomplete: Determine if search window is open?

Question

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?

Answer 1

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

Answer 2

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