jQuery UI autocomplete bug: autocomplete suggestions disappear when returning from another browser tab

Why should the autocomplete output disappear only because the user switches back to this browser tab?

Because the field is blurred.

hehe, this is unusual GUI.

How can this (suggestions disappear when coming back to that tab) be avoided?

Please supply a solution, instead of simply closing this bug.

Run a new search using page visibility APIs? You'll need to ask for help on the forums or StackOverflow.

I did this already before filing this bug - https://forum.jquery.com/topic/jquery-ui-autocomplete-bug-autocomplete-suggestions-input-line-is-not-empty-disappear-when-returning-from-another-browser-tab

Solution:

When my page (the container div of my query form with the input line) regains the focus - for example, because the user switched back from another browser tab - I fire the autocomplete search (bound to the #input) simply again.

This solved my problem.

$("#container).live( "focusin", function(event) {

$("#input").autocomplete( "search", $("#input").val() );

})

That sounds like a bad idea, you don't want to trigger a search on every focus. But this is out of scope, so I'll stop responding here.

Replying to [comment:6 scott.gonzalez]:

That sounds like a bad idea, you don't want to trigger a search on every focus. But this is out of scope, so I'll stop responding here.

You are simply wrong. The lines of code are exactly what is needed as solution, and fire only a _single_ search when returning from another tab or otherwise returning to that page. And this is needed to "refresh" and show the suggestions for the (still present) $("#input).val()

This can be easily proved: add a console.log message after the $("#input").autocomplete( "search", $("#input").val() ); statement.

Except that, as I said, every single time you focus the field, you'll run a search. Go ahead, try it. Type something, wait for results to show up. Tab away from the field, watch the results disappear. Shift+tab back to the field, watch the search run again.

In addition

I tried to follow your thoughts to avoid unnecessary "searches" and experimented with using a mechanism which only re-activates the visibility of the suggestion list div.

I compared my original method 1

$("#container).live( "focusin", function(event) {
    $("#input").autocomplete( "search", $("#input").val() );
})

with a new method 2

$("#container).live( "focusin", function(event) {
   $("#ui-id-1").show();
}) 

The second method does not work in all cases. For example. when you navigate away from the page A with jquery-ui autocomplete by clicking on a link which is present on the page, and then use browser back to your page A, the ui-autocomplete ui-menu div $("#ui-id-1") is shown, but empty,

Therefore it makes sense to use the first method, which fires a new search and always ensures that the suggestions are shown. if the input is not empty.