在Firefox中的Select2上有多个选择的输入字段缓存问题

Question

Currently attempting to implement Select2 in my rails app so a user can send messages to multiple users, I adapted the remote data example code on the site for my app as follows:

  $("#shareCurrentInput").select2({
    placeholder: "Search for a user",
    width: "350px",
    multiple: true,
    minimumInputLength: 3,
    ajax: { 
      url: "search.json",
      dataType: 'json',
      data: function (term, page) {
        return {
            search: term
        };
     },
    results: function (data, page) { 
        return {results: data};
    }
   },

  formatResult: userFormatResult,
  formatSelection: userFormatSelection,  

  escapeMarkup: function (m) { return m; } 
});


 function userFormatResult(user) {
    var markup = "<table class='user-result'><tr>";
    if (user.uid !== undefined ) {
        markup += "<td class='user-image'><img src='http://graph.facebook.com/" + user.uid + "/picture?width=50&height=50'/></td>";
     }
    markup += "<td class='user-info'><div class='user-title'>" + user.name + "</div>";
    markup += "</td></tr></table>";
    return markup;
 }

 function userFormatSelection(user) {
    return user.name;
 }

This works as I intend it to in Safari, but in Firefox, I believe due to the fact that by default the browser caches input values from session to session, it causes issues when refreshing the page and attempting to select users. Is there a way to prevent Firefox from caching this in the code (ie without asking the user to turn off caching in their browser setting)? Or is there another reason this code isn't working in Safari?

I've tried using this code to disable autocomplete through jQuery, and there doesn't seem to be a CSS method to disable form autocomplete. There also seem to be issues with disabling autocomplete in Chrome. Is there an optimum cross-browser solution? Autocomplete is off by default in the input field in Select2, and the input is not part of a form, so this solution does not seem possible.

EDIT: As per this page , the issue is only when I refresh the page, if I press enter in the address bar then there is no issue.

Answer 1

Just added this code:

$('#shareCurrentInput').val('');

Seems to work even on refresh in Firefox.

Answer 2

If similar issue is happening with page refresh/reload using jQuery, try

document.location.reload(true);

instead of document.location.reload();

Details: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload