javascript - 如何通过 javascript/不刷新自动保存 HTML5 搜索输入

Question

问题:
有没有办法从 javascript 触发 Webkit 的自动保存功能？如果不通过专用 API，是否至少有一种方法可以通过操纵 cookie 来实现相同的功能？

背景:
我真的很喜欢 HTML5 中新的“搜索”输入类型，并希望为启用 Webkit 的用户提供方便地记忆他们过去的搜索的好处，而无需将所有这些搜索存储在我的数据库中(使用自动保存功能)。

我遇到的问题是，如果搜索输入封装在表单中并且该表单在提交时执行标准 POST，搜索词似乎只会被保存。因为我的搜索输入被用来过滤已经存在的结果，完全重新加载页面在逻辑上没有多大意义，所以我使用 AJAX 来重新填充结果。如果我在我的 AJAX 函数中返回 false，界面是干净和一致的，但这显然不会触发表单 POST [按设计]，因此浏览器(至少 Chrome)不会保存搜索词。返回 true 会刷新整个页面，破坏我的 AJAX 注入(inject)内容和过滤器的整个点，但搜索词会被保存。

$('#filter-form').submit(function(e) {
      var term = $('#filter').val();
      $.ajax({
        async: true,
        type: 'POST',
        url: '/Home/GetResults',
        data: {
          filter: term
        },
        success: function(returnData) {
          $('#result-list').html(returnData);
        }
      });
      return false;
    }

<form id="filter-form" name="filter-form" action="#">
  <input type="search" name="filter" id="filter" results="5" autosave="EluminitePreviousFilters" />
</form>
<div id="result-list"></div>

Answer 1

有一个技巧是使用隐藏的 iframe 连接到表单:

<iframe id="hidden-frame" name="hidden-frame" style="display:none" src="about:blank"></iframe>

<form target="hidden-frame" method="post" action="about:blank">
  <input type="search" name="filter" id="filter" results="5" />
  <button type="submit">Submit</button>
</form>

如果您的表单提交处理程序返回 true，表单将被提交(但用户不会注意到)，浏览器会将输入的值保存在自动完成列表中。

我在 JSBin 上创建了一个示例:http://jsbin.com/farelufaku/edit?html,output