Stop the jQuery autocomplete plugin from forgetting text when the user clicks back

Question

I'm using the jQuery autocomplete plugin to get a list of locations, which works fine. But if the user clicks the browser's back button after submitting the page with the autocomplete textbox, the textbox is empty. If I take the autocomplete off the textbox and submit & click back it remembers the text.

Is there a way to stop the autocomplete from clearing the textbox when the page loads?

Answer 1

in the $.autocompleter function on the plugin there is a variable called previousValue at line 72 of the unpacked version of the jquery.autocomplete.js. This variable is set to an empty string on initialization.

If you're feeling ambitious, you could try editing this script and have if check if the textbox already has a value, and set previousValue to it if it does.

Answer 2

Well I found the issue. It seems to be on Firefox, not IE, and it's not technically due to the autocomplete plugin. It's because the plugin adds the attribute autocomplete="off" to the textbox.

This is so that the browser's autocomplete history doesn't conflict with jquery's autocomplete, but in Firefox, fields that have this attribute don't get pre-populated when the user clicks the back button.

I'm guessing there isn't a way around this, it appears to be the default browser behaviour. If anyone knows different please post a comment.

Answer 3

That's in fact a BAD behavior of IE, the "remembering" feature should be done using a server side language.

Some of them (ASP.NET) do that automatically unless you told not to.

With PHP you need to use GET or POST supervars.

If you are not using any server side language, you can use javascript to access the GET querystring, and pass some parameters between pages, that paramaters can be used to obtain the textbox value, and then prepopulate it.

Answer 4

Hi!

I had the same problem today, and found a way around this.

$("#search_form").submit(function() {
    $("#location")[0].removeAttribute("autocomplete");
});

This code will remove the autocomplete attribute just before the form is submitted. You will have to change the selectors so that they match your form and input(s).

Answer 5

None of the solutions posted worked for me, since my highly AJAX-driven application simply got cached in its last known state before leaving the page (with autocomplete="off"), and when user than used the back button, the browser correctly didn't insert the previous value to the search field (as attribute autocomplete was set to off). So the only solution was in this case to get my JS running, and to do that I had to prevent caching. I found this simple snippet to work well. Just insert it on your main page (that the user will be leaving when clicking on any of the links), and you should prevent the caching pretty well. Then use JS to populate all the values you want, including the value of the autocomplete field.

  window.onbeforeunload = function () {
    // Empty function, but it prevents the browser caching this anyway!
  }