当用户点击返回时，阻止 jQuery 自动完成插件忘记文本答案

【问题标题】：Stop the jQuery autocomplete plugin from forgetting text when the user clicks back当用户点击返回时，阻止 jQuery 自动完成插件忘记文本
【发布时间】：2009-01-14 00:48:45
【问题描述】：

我正在使用jQuery autocomplete plugin 来获取位置列表，效果很好。但是如果用户在提交带有自动完成文本框的页面后单击浏览器的后退按钮，则文本框为空。如果我取消文本框的自动完成并提交并单击返回，它会记住文本。

有没有办法在页面加载时阻止自动完成清除文本框？

【问题讨论】：

标签： javascript jquery browser autocomplete

【解决方案1】：

我今天遇到了同样的问题，并找到了解决方法。

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

此代码将在表单提交之前删除自动完成属性。您必须更改选择器，以便它们与您的表单和输入相匹配。

【讨论】：

很好的解决方法！要更加 jQuery-ish，您可以使用 $('#location').removeAttr('autocomplete'); - 如果曾经出现 #location 不在表单的 html 中的情况，这将为您提供空引用保护。
我也有同样的想法，但它对我不起作用。也许是因为我使用了 ajax 加载的 json 列表。我最终做的是在加载列表后再次设置值。

【解决方案2】：

嗯，我发现了问题。它似乎在 Firefox 上，而不是 IE 上，而且在技术上不是由于自动完成插件。这是因为插件在文本框中添加了属性autocomplete="off"。

这是为了使浏览器的自动完成历史不会与 jquery 的自动完成冲突，但在 Firefox 中，当用户单击后退按钮时，不会预先填充具有此属性的字段。

我猜没有办法解决这个问题，这似乎是默认的浏览器行为。如果有人知道不同，请发表评论。

【讨论】：

【解决方案3】：

在插件的$.autocompleter 函数中，在jquery.autocomplete.js 的解压缩版本的第72 行有一个名为previousValue 的变量。此变量在初始化时设置为空字符串。

如果您有野心，可以尝试编辑此脚本并检查文本框是否已经有值，如果有，则将 previousValue 设置为它。

【讨论】：

好主意，但不幸的是，当我点击返回时，文本框没有任何价值，在它到达那一行之前，它已经是空白的。一定有别的东西在清除它

【解决方案4】：

发布的所有解决方案都不适合我，因为我的高度 AJAX 驱动的应用程序只是在离开页面之前以其最后一个已知状态缓存（使用 autocomplete="off"），并且当用户使用后退按钮时，浏览器没有正确地将前一个值插入搜索字段（因为属性自动完成设置为关闭）。所以在这种情况下，唯一的解决方案是让我的 JS 运行，为此我必须防止缓存。我发现这个简单的 sn-p 效果很好。只需将其插入您的主页（用户单击任何链接时都会离开），您应该可以很好地防止缓存。然后使用 JS 填充所有你想要的值，包括自动完成字段的值。

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

【讨论】：

【解决方案5】：

虽然 heyman & Glenn 的代码有效，但在提交后仍显示表单时禁用提交可能还不够，例如因为它使用 AJAX 更新页面的另一部分。此外，当使用另一个链接（不提交表单）离开页面时，会保留自动完成属性，使用后退按钮将删除输入的值。

我使用下面的代码来解决这个问题。它仅在输入元素处于活动状态（具有焦点）时添加自动完成属性。我已将属性的删除和添加放在命名函数中，因为我有多个具有不同设置的自动完成字段。如果您只有一个自动完成字段，您可以将函数体放在事件语句中。

var autoCompleteFixSet = function() {
    $(this).attr('autocomplete', 'off');
};
var autoCompleteFixUnset = function() {
    $(this).removeAttr('autocomplete');
};

$('#elem').autocomplete({
    minLength : 1,
    source: '/values.php'
}).focus(autoCompleteFixSet).blur(autoCompleteFixUnset).removeAttr('autocomplete');

【讨论】：

【解决方案6】：

这实际上是 IE 的一种不良行为，“记住”功能应该使用服务器端语言来完成。

其中一些 (ASP.NET) 会自动执行此操作，除非您告知不要这样做。

使用 PHP，您需要使用 GET 或 POST 超级变量。

如果您不使用任何服务器端语言，您可以使用 javascript 访问 GET 查询字符串，并在页面之间传递一些参数，这些参数可用于获取文本框值，然后预填充它。

【讨论】：