15

質問:
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>

4

2 に答える 2

8

フォームに接続された非表示の 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

于 2015-10-13T17:38:34.630 に答える
1

デモ: https://so.lucafilosofi.com/how-to-autosave-html5-search-input-through-javascript-without-refresh/

こんにちはEluminite、私はこれがおそらく問題外（？）であることを知っていますが、あなたが言うので：

少なくとも、Cookie を操作して同じ機能を実現する方法はありますか?

私が間違っていなければ、あなたの主な目標はデータベースにデータを保存しないことです。実際に使用できます

Cookie を使用するよりもはるかに直感的な方法で、ブラウザーがキーと値のペアを保存できるメカニズムを提供するWeb Storage API 。

ご覧のとおり、さまざまな数の最新のブラウザーでサポートされており、サポートされていない場合でも Cookie を使用できます...

jQuery UI オートコンプリートを使用したコード実装については、私のデモを参照してください。

注:もちろん、これらのjQuery-Storage-API、jQuery Storage、およびその他の多くのように、ローカル ストレージとCookieの両方を同時に処理できるプラグインがあります。グーグルで検索するだけです。

この助けを願っています。

于 2015-10-20T14:32:10.563 に答える