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

Question

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

背景:
我非常喜欢HTML5中新的"搜索"输入类型,并希望为我的Webkit用户提供轻松调用过去搜索的好处,而无需在我的数据库中存储所有这些搜索的开销(使用自动保存功能).

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

$('#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