Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to check if jqueryUI autocomplete dropdown box was open

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 ?

like image 551
Andrus Avatar asked Dec 09 '11 08:12

Andrus


People also ask

How do I know if autocomplete dropdown is 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.

How does jQuery autocomplete work?

The autocomplete (options) method declares that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. The options parameter is an object that specifies the behavior of the list of suggestions when the user is typing in the input field.


1 Answers

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
like image 82
Dr.Molle Avatar answered Sep 28 '22 12:09

Dr.Molle