Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#8832 closed bug (notabug)

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

Reported by: Syryos Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.autocomplete Version: 1.9.1
Keywords: Cc:
Blocked by: Blocking:

Description

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

I run an application with a working jQuery UI autocomplete form in a first tab. I do know how to use the autocomplete function. I also do know how to use $("myinput").autocomplete( "search", currentInput ); to manually trigger the list of suggestions to be shown.

Scenario - how to replicate the bug =========================

An input "jav" is - for example - extended by two suggestions in the list of suggestions below the input like "java" and "javascript".

In my Firefox browser, I now change to a second tab with a different web address.

Autocomplete bug =============

When I return to the first browser tab, the input "jav" is still present, but the list of suggestions has disappeared, there is no output any more.

For me, this is a severe bug in autocomplete. Why should the autocomplete output disappear only because the user switches back to this browser tab?

I have written autocomplete javascripts since a long time ago, but jquery-ui autocomplete appears to behave differently. Please fix this bug.

Change History (9)

comment:1 Changed 7 years ago by Scott González

Resolution: notabug
Status: newclosed

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

Because the field is blurred.

comment:2 Changed 7 years ago by Syryos

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.

Last edited 7 years ago by Syryos (previous) (diff)

comment:3 Changed 7 years ago by Scott González

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

comment:5 Changed 7 years ago by Syryos

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() );

})

Last edited 7 years ago by Syryos (previous) (diff)

comment:6 Changed 7 years ago by Scott González

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.

comment:7 in reply to:  6 Changed 7 years ago by Syryos

Replying to 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.

comment:8 Changed 7 years ago by Scott González

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.

comment:9 Changed 7 years ago by Syryos

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.

Note: See TracTickets for help on using tickets.