jQuery autocomplete inside tabs - clicking away after search creates orphan results window

I have an autocomplete textbox inside some tabs.

See here for an example: http://jsfiddle.net/fTQ26/3/

Try the following steps:

  1. Type 'A' into the text box
  2. Click one of the other tabs immediately after
  3. Wait a couple of seconds

You should see that you end up with an orphaned autocomplete results box.

What is the best way to ensure this does not happen?

(I would appreciate an elegant solution if possible as the actual page that this is happening on is quite complex!)


John Koerner is correct. But you also need to close autocomplete after clicking on another tab.

 $( "#tabs" ).tabs({
     select: function(event, ui) {
         $( "#tags" ).autocomplete('close');

Otherways if you wait in the first tab till autocomplete opens and after that go to another tab, autocomplete is still on top of content.

Updated fiddle:http://jsfiddle.net/fTQ26/16/

You can bind to the open event and if the element is not visible, then close the autocomplete:

open: function (event, ui)
    if (!$(this).is(":visible"))

Updated fiddle: http://jsfiddle.net/fTQ26/15/

Need Your Help

When an exception is thrown by an action method, it appears as PropertyNotFoundException

exception-handling jsf-2 facelets

Our application is JSF2 based and we are desiging a exception handling for that. I tried using JSF2 exception handling framework configured in faces-config.xml.

declaring a pointer to the main window from a dialog in Qt

c++ qt

this maybe a c++ question most probely than qt. but I was finding a way to do this for 2days. but cant solve this my self. I expect some experts help in this issue. this is my question.