0

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

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

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

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

更新

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

  1. 为表格设置autocomplete="off"。这可以防止对复选框项目的更改与后退按钮一起保留。然后它们将直观地更改为与文本输入框相同的先前设置。

  2. 范围滑块有点棘手（我使用的是 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

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

这里有一些相关的讨论：单击后退按钮时是否存在跨浏览器 onload 事件？

4

1 回答 1

0

表单上的设置autocomplete="off"解决了这个问题。为问题添加了一些细节。

于 2013-08-23T20:57:00.890 回答