Question

我的网站标题中有一个小搜索表单。在表单中，您可以输入要搜索的关键字和复选框以指示要搜索的字段，并使用滑块指定年份范围。我遇到的问题是出现以下情况时：

用户输入搜索并获得结果
用户修改搜索（添加关键字，更改日期滑块，取消选中要包含在搜索中的字段之一）并获取新结果
用户点击后退按钮

单击后退按钮时，搜索框中的表单数据将恢复为预期的先前输入数据，但对复选框和滑块的任何更改都不会恢复为先前的值。

使用@Html.TextBoxFor(o => o.Field)方法将所有表单数据映射到ViewModel，并将表单作为GET操作提交。我相信我对浏览器处理表单数据和后退按钮的理解存在差距。

更新

以下是我目前正在解决此问题的方法：

为表单设置autocomplete="off"。这样可以使用后退按钮保持对复选框项目的更改。然后，它们将直观地更改为与文本输入框相同的先前设置。

范围滑块有点棘手（我使用的是jQRangeSlider）。为了使其与查询字符串保持一致，我使用了来自此问题（https://stackoverflow.com/a/2880929/1803682）的JavaScript来提取查询字符串值，然后在它们不是默认值时手动设置它们。结果如下：

$(document).ready(function() {
  var urlParams;
  var match,
    pl = /\+/g, //Regex for replacing addition symbol with a space
    search = /([^&=]+)=?([^&]*)/g,
    decode = function(s) { return decodeURIComponent(s.replace(pl, " "));},
    query = window.location.search.substring(1);
  urlParams = {};
  while (match = search.exec(query)){
    urlParams[decode(match[1])] = decode(match[2]);
  }
  $("#slider").rangeSlider("values", urlParams["SY"], urlParams["EY"]);
});

如果我在这里仍然缺少一个简单的问题，我将不胜感激。

更新2

对于后退按钮，jQuery中的$(document).ready事件似乎不是跨浏览器的一致方法。另外 - 在我的初始测试中，看起来autocomplete="off"也可能不适用于滑块。

这里有一些相关的讨论：Is there a cross-browser onload event when clicking the back button?

Answer 1

在表单上设置autocomplete="off"解决了此问题。在问题中添加了一些细节。

单击后退按钮时，某些表单字段会使用以前的数据进行更新

1 个答案: