Question

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!)

Answer 1

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/