フォームを提出することなくオートコンプリートをトリガーする

私は3つのテキスト入力を持つ非常に簡単なWebアプリケーションを作成しています。入力は結果を生成するために使用されますが、すべての作業はJavascriptで行われるため、フォームを送信する必要はありません。私は、ブラウザに提出されたフォームの場合と同じように、オートコンプリートの入力値を保存する方法を見つけることを試みています。フォームを提出することなくオートコンプリートをトリガーする

私は入力をオートコンプリート= "オン"に手動で試みましたが、フォームを送信しないと、ブラウザは値を保存する必要があることを知ることができません。

また、onSubmit = "return false;"を持つフォームで入力をラップしようとしましたが、実際にフォームを送信できないように見えても、ブラウザは入力値を格納できません。

手動でlocalStorageまたはクッキーを使用して入力を保持し、それらからオートコンプリートヒントを生成することはもちろん可能ですが、手作業で複製する代わりにネイティブブラウザの動作にタップするソリューションを見つけることを望んでいます。

出典

2013-03-17 AmericanUmlaut

。 3つの入力ボックスからの情報を使用して、いくつかのプリロードされたデータでjavascriptがルックアップを行うように、ブラウザに情報をロードしていることを意味しますか？いくつかのオートコンプリート実装では、Ajaxを使用して結果をロードしています。それはあなたのモデルに合っていませんね。ここで – VKen

、同様の質問に提供される解決策を試してください：http://stackoverflow.com/questions/8400269/browser-native-autocomplete-for-ajaxed-forms – sweetamylase

@VKen私は単に入力を処理するためのブラウザをしたいかのように、彼ら実際にフォームを提出することなく、以前に自動補完候補として入力した値がユーザーに表示されるという点で、提出されたフォームの一部です。 – AmericanUmlaut

：あなたのJavaScriptで

<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe> 

<form target="remember" method="post" action="/content/blank"> 
    <fieldset> 
    <label for="username">Username</label> 
    <input type="text" name="username" id="username" value=""> 
    <label for="password">Password</label> 
    <input type="password" name="password" id="password" value=""> 
    </fieldset> 
    <button type="submit" class="hidden"></button> 
</form>

は、例えば、提出をトリガ~~$("form").submit();~~$("#submit_button").click()（コメントから更新）

あなたは&ポストを得るために/コンテンツ/空白の空のページを返す必要があり（約：空白が私のために動作しますが、メーリングリストへはなかったです）。

出典

2013-03-26 10:06:32 laktak

ただノートで、ポイントにコンテンツ/空白のURLを定義する必要はありません....年以上のTwitter先行入力された文字にコミットiframeとform at：属性をabout：blankとして定義すると、私にとってうまくいきます。 – AmericanUmlaut

FYIこれは私の仕事ではありませんでした（多分私はクロム拡張ページから試したからです）。私は少しそれを修正し、それが仕事をした：submitボタン（たとえば「mySubmit」）に特定できるクラスを設定し、その後、代わりに$（「フォーム」）の（提出）$をします）（クリックしてください。（「mySubmit。」）。。 –

+1ですが、 '$（" form "）。submit（）;'を使用すると動作しません。 '$（"＃submit_button "）。click（）' – Legionar

これはテストしていませんが、非表示のiframeにフォームを送信してもフォームが実際に送信されるようになりましたが、現在のページは再読み込みされません。

<iframe name="my_iframe" src="about:blank"></iframe> 

<form target="my_iframe" action="about:blank" method="get">...</form>

出典

2013-03-19 22:21:18 Alex

の重複ソリューションは私のために働いた（クロム43でテスト）。 – blazkovicz

名前を特定する必要があるようです。「名前」、「電子メール」、「電話」、「アドレス」などの標準名は、ほとんどのブラウザに自動的に保存されます。

問題は、ブラウザがこれらの名前を別々に扱うことです。例えば、ここではクロムの正規表現です：

最初の名前： "最初の*名前|イニシャル| fnameは|最初の$。"
メール： "e.?mail"
アドレス（1行目）： "アドレス*ライン|アドレス1 | ADDR1 |ストリート"
郵便番号： "ジップ|郵便|郵便*コード| Pコード|^1Zの$"

しかし、あなたがカスタマイズできるように、クロムはまた、x-autocompletetypeを使用しています名前を入力してオートコンプリートタイプを入力しますが、これはカスタムフィールド用ではないと思います。

Here is chrome's experiment

これはIE、Opera、Mozillaの別の機能です。今のところ、そこにiframeソリューションを試すことができますので、提出することができます。（多分準標準的なものかもしれません）

まあ、それは私が助けることができます。

出典

2013-03-21 23:59:00 aIKid

多分あなたはこれを使用することができます...ローカルとリモートのプリフェッチによるオートコンプリートの非常に完全な実装です。これはlocalStorageを使用して結果を保持し、また入力要素にヒントを表示します...コードを理解しやすく、完全なjqueryプラグインを使用したくない場合は、コードを見て、あなたが望むものを達成する方法を見てみてください。

出典

2013-03-25 08:47:45 IJMorgado

なしは多分https://select2.github.io/が、何か良い... – matanster

jQueryを使用すると、フォーカスがオフのときにオートストアされたデータをローカルストレージに保存し、オートコンプリートして保存された値にフォーカスしたときにデータを保持します。

すなわち

$(function(){ 
$('#txtElement').on('focusout',function(){ 
    $(this).data('fldName',$(this).val()); 
} 

$('#txtElement').on('focusin',function(){ 
    $(this).val($(this).data('fldName')); 
} 
}

アプリケーション要件に応じて、他のイベントにも永続性ロジックをバインドすることもできます。クローム、IEとFirefoxでテスト

出典

2013-03-26 08:36:24

-1

POST経由でフォームを送信していることを確認してください。 ajax経由で送信している場合は、action属性を省略して<form autocomplete="on" method="post">を実行してください。

出典

2014-07-09 22:09:36

我々は、我々は何ができるかreturn falseまたはe.preventDefault()

とそれを取り消すことができないことを意味し、フォームがを提出している場合にのみ、ブラウザがその情報を節約することを知っているが、それはどこにデータを送信しますですページを再ロードせずに。我々は現在、受け入れ答え上iframe

<iframe name="" style="display:none" src="about:blank"></iframe> <form target="" action="about:blank"> <input name="user"> <input name="password" type="password"> <input value="Login" type="submit"> </form>

Demo on JSfiddle (tested in IE9, Firefox, Chrome)

専門家でそれを行うことができます。

短いコード。

jQueryなし。

サーバー側のページはロードされません。

追加のjavascriptはありません。

追加のクラスは必要ありません。

追加のjavascriptはありません。通常、XHRを送信するフォームのsubmitイベントにハンドラを添付し、はキャンセルしません。

無javascriptのJavascriptの例

// for modern browsers with window.fetch document.forms[0].addEventListener('submit', function() { window.fetch('login.php', { method: 'post', body: new FormData(document.forms[0])) }).then(function() { /* login completed */ }) // no return false!! });

サポート

理想的には、あなたもjavascriptをせずにフォームの仕事をしましょう、そうtargetを削除し、フォームを受信するページにアクションを設定する必要がありますデータ。

<form action="login.php">

そしてあなたがsubmitイベントを追加する場合、単純にjavascriptを経由して、それを追加します。むしろ、彼らの既存のフォーム機能を変更しません人のために

formElement.target = ''; formElement.action = 'about:blank';

出典

2015-04-27 01:48:01

を、あなたがのコピーを受け取るために第二の形式を使用することができますすべてのフォームの値を入力してから、メインフォームが送信される前に空白のページに送信します。ここでは、JQuery Mobileを使って完全にテスト可能なHTMLドキュメントを解説します。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
    <form method="post"> 
     <input type="text" name="email" /> 
     <input type="submit" value="GO" onclick="save_autofill(this);" /> 
    </form> 


    <script> 
     function save_autofill(o) { 
      $(':input[name]', $('#hidden_form')).val(function() { 
       return $(':input[name=' + this.name + ']', $(o.form)).val(); 
      }); 

      $('#hidden_form').find("input[type=submit]").click(); 
     } 
    </script> 

    <iframe name="hidden_iframe" style="display:none"></iframe> 
    <form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none"> 
     <input type="text" name="email" /> 
     <input type="submit" /> 
    </form> 
</body> 
</html>

save_autofill関数は、メインフォームの送信ボタンで呼び出す必要があります。フォームを送信するスクリプト関数がある場合は、save_autofill呼び出しの後にその呼び出しを置きます。あなたは、あなたのメインフォームのそれぞれについて、hidden_formに名前付きのテキストボックスを持っていなければなりません。あなたのサイトはSSLを使用している場合

は、あなたはhttps://about:blankでabout:blankためのURLを変更する必要があります。

出典

2015-06-01 22:49:30

Firefoxではいくつかの警告を避けるためにhttps：// about：blankが本当に必要です。この問題がない他のオプションがあるのだろうかと思います。多分javascript：void（0）？また、別のフォームを送信すると、実際にはすべてのフォームのブラウザの自動補完機能が追加されますか？ – marcus

-1

あなたが使用することができます "" iframe srcとformアクションの両方で私が正しく質問を理解していればわからない

<iframe id="remember" name="remember" style="display:none;" src="."></iframe> 
<form target="remember" method="post" action="."> 
    <input type="text" id="path" size='110'> 
    <button type="submit" onclick="doyouthing();">your button</button> 
</form>

出典

2016-12-09 07:10:23

フォームを提出することなくオートコンプリートをトリガーする

答えて

無javascriptのJavascriptの例

サポート

関連する問題