how to check if jqueryUI autocomplete dropdown box was open

Question

jQgrid form contains several jQueryUI autocomplete boxes.

In keydown event handler Esc key press needs to be processed only if autocomplete dropdown box is not open. If autocomplete dropdown is open, Esc press shoult perform its default action only (closing dropdown and cancelling selection).

How to check if autocomplete dropdown was opened ? It can check for any autocomplete box was opened in document body.

jQuery.extend(jQuery.jgrid.edit, {
   beforeShowForm: function ($form) {
            var gridIdEncoded = $.jgrid.jqID($form[0].id.substring(8));
            $("#editmod" + gridIdEncoded).bind('keydown.formEvent', function (e) {
                 if (e.which === 27) {
                   // Todo: How invoke click only if any autocomplete dropdown is not opened
                   $("#TblGrid_" + gridIdEncoded + "_2 #cData").trigger("click");
                   return false;
                   }
               });
         }
     });

Update

I tried Dr. Molle answer using

 if (e.which === 27) {  
   alert( $('.ui-autocomplete.ui-widget:visible').length );
   if ( $('.ui-autocomplete.ui-widget:visible').length != 0 )
     // dropdown is open, allow default behaviour
     return;

but $('.ui-autocomplete.ui-widget:visible').length is 0 if esc is pressed (it is 1 if other key is pressed and dropdown is open). It looks like causing Esc causes causes autocomplete default behaviour first wthis closes dropdown. Only after this my handler is executud which does not find that dropdown is executed.

How fix this ?

Submerse

Answer 1

Andru's comment is right on. If you cancel propegation of the event after the autocomplete closes, it squelches the ESC

$('.autocomplete').bind('autocompleteclose', function(event, ui) {
return false;
});

Knowles

I don't understand this answer. This blocks autocomplete dropdown closing. Should I use this add close autocomplete manually in 'keydown.formEvent' method ? Which code should be used to close dropdown? – Submerse

Answer 2

Use:

!!$($('autocompleteselector').autocomplete('widget')).is(':visible')

..to check a specific autocomplete.

To check if any dropdown is open use:

!!$('.ui-autocomplete.ui-widget:visible').length

Kiarakibble

Thank you. In keydown.formevent method dropdown is already closed and length is 0 always, so this check does not find that dropdown was opened. I updated question. how to fix this ? – Submerse

The updated question sounds as if it would be sufficient to find the last opened dropdown? If yes, there is a open-event for autocomplete. All you have to do ist to store the active autocomplete/dropdown in a variable when the open-event fires. – Kiarakibble

It looks like no. We need to know is the dropdown open or not if Esc is pressed. Maybe it is possible to stop esc key propagation if esc key is processed by autocomplete ? Or is it possible to catch esc key press earlier, before dropdown is closed by autocomplete esc key handler or force autocomple to close dropdown in keyup instead or some other idea ? – Submerse

Yes, that's right. I was able to make this work by canceling the ESC keypress after the autocomplete closes: $('.autocomplete').bind('autocompleteclose', function(event, ui) {return false; }); – Knowles

What is the extra bit for/what does it do? !!$. I couldn't find a reference. – Horripilate