Starten Sie die automatische Vervollständigung, ohne ein Formular zu senden

Ich Schreibe an einem sehr einfachen web-app mit drei text-Eingaben. Die Eingaben verwendet werden, um erzeugen ein Ergebnis, aber alle Arbeit getan ist in Javascript, so gibt es keine Notwendigkeit, um ein Formular Absenden. Ich bin versuchen zu finden ein Weg, um den browser zum speichern der Eingabe die Werte für autocomplete, wie es wäre, wenn Sie in einer form vorgelegt wurde.

Ich habe versucht, die Eingänge autocomplete="on" manuell, aber ohne ein Formular zu senden, der browser hat keine Möglichkeit zu wissen, Wann es die Werte zu speichern, so hat dies keine Auswirkung.

Habe ich auch schon versucht, das einwickeln der Eingaben in einem Formular mit onSubmit="return false;", aber verhindert das Formular tatsächlich abschicken erscheint, auch verhindern, dass der browser das speichern Ihrer Eingaben' Werte.

Ist es natürlich möglich, manuell zu benutzen, localStorage oder einem cookie zu bestehen Eingänge und erzeugen dann AutoVervollständigen-Tipps von denen, aber ich bin der Hoffnung, eine Lösung zu finden, die Hähne in native browser-Verhalten, statt Sie zu duplizieren, von hand.

InformationsquelleAutor der Frage AmericanUmlaut | 2013-03-17

  1. 30

    Getestet mit Chrome, IE und Firefox:

    <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>

    In Ihrem Javascript-trigger the submit, z.B. $("form").submit(); $("#submit_button").click() (aktualisiert von Kommentaren)

    Sie brauchen, um wieder eine leere Seite /content/blank für get & post (about:blank hat bei mir nicht funktioniert, aber YMMV).

    InformationsquelleAutor der Antwort laktak

  2. 10

    Wir wissen, dass der browser speichert seine Informationen nur, wenn das Formular abgeschickt wirdwas bedeutet, wir können nicht kündigen, es mit return false oder e.preventDefault()

    Was wir tun können ist, machen es die Daten übermitteln zu nirgendwo ohne Neuladen einer Seite. Wir können tun, dass mit einer 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 auf JSfiddle (getestet in IE9, Firefox, Chrome)

    Profis über die derzeit akzeptierte Antwort:

    • kürzeren code;
    • kein jQuery;
    • keine server-Seite geladen;
    • keine zusätzlichen javascript;
    • keine zusätzlichen Klassen notwendig.

    Es ist keine zusätzliche javascript. Sie normalerweise befestigen Sie einen handler zu submit - Ereignis des Formulars zum senden der XHR-und nicht stornieren.

    Javascript-Beispiel

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

    No-javascript-Unterstützung

    Idealerweise sollten Sie lassen Sie das Formular arbeiten, ohne javascript zu, so entfernen Sie die target und setzen Sie die Aktion auf einer Seite, erhalten Sie Ihre Daten in das Formular.

    <form action="login.php">

    Und dann einfach fügen Sie es per javascript, wenn Sie fügen Sie die submit Veranstaltung:

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

    InformationsquelleAutor der Antwort bfred.it

  3. 5

    Habe ich noch nicht getestet, aber es könnte funktionieren, wenn Sie das Formular abschicken, um einen versteckten iframe (so dass das Formular tatsächlich abgeschickt aber die aktuelle Seite nicht neu geladen).

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

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

    InformationsquelleAutor der Antwort Alex

  4. 2

    Vielleicht können Sie diese Twitter Typeahead...ist eine sehr komplette Implementierung des autocomplete, mit lokalen und remote-prefetch, und diese machen die Verwendung von localStorage zum fortbestehen Ergebnisse und es wird auch zeigen, einen Hinweis in das input-element...der code ist einfach zu verstehen und wenn Sie nicht wollen, verwenden Sie die komplette jquery-plugin, ich denke, man kann sich den code, um zu sehen, wie Sie das erreichen, was Sie wollen...

    InformationsquelleAutor der Antwort IJMorgado

  5. 1

    Aus, was ich gesucht.. scheint es, müssen Sie identifizieren die Namen. Einige standard-Namen wie 'name', 'email', 'Telefon', 'Adresse' werden automatisch gespeichert in den meisten browser.

    Gut, das problem ist, dass Browser behandeln diese Namen differenetly. Zum Beispiel, hier ist chrome regex:

    • ersten Namen: "erste.*name|Initialen|fname|$"
    • E-Mail: "e.?E-mail"
    • - Adresse (Zeile 1): "- Adresse.*Linie|address1|addr1|Straße"
    • zipcode: "zip|postal|post.*code|P-Code|^1z$"

    Aber chrome wird x-autocompletetypeso können Sie den Namen anpassen, und legen Sie eine AutoVervollständigen-Typ, aber ich glaube, das ist nicht für benutzerdefinierte Felder..

    Hier ist chrome experiment

    Und es ist etwas anderes, im IE, Opera und Mozilla. Für jetzt, Sie können versuchen, die iframe-Lösung gibt, so kannst du es abschicken. (Vielleicht ist es etwas semi-standard)

    Gut, mehr kann ich nicht helfen.

    InformationsquelleAutor der Antwort aIKid

  6. 1

    Für diejenigen, die lieber keine änderung der bestehenden form Funktionen, die Sie verwenden können, eine zweite form zu erhalten Kopien aller form-Werte, und senden Sie dann eine leere Seite vor dem eigentlichen form übermittelt. Hier ist eine voll testbare HTML-Dokument mit JQuery Mobile und demonstriert die Lösung.

    <!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>

    Den save_autofill Funktion braucht nur aufgerufen zu werden, auf Ihrem Haupt-form-submit-button. Wenn Sie ein Skript-Funktion, die übermittelt Ihre form, Ort, rufen Sie nach der save_autofill nennen. Sie müssen einen Namen "Textfeld" in Ihrem hidden_form für jeden in Ihrem Haupt-form.

    Wenn Ihre Website SSL verwendet, dann ändern Sie die URL für about:blank mit https://about:blank.

    InformationsquelleAutor der Antwort Carter Medlin

  7. 0

    Können Sie jQuery verwenden zu bestehen AutoVervollständigen-Daten in den localstorage, wenn focusout und wenn focusin es autocompletes auf den Wert beibehalten.

    d.h.

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

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

    Können Sie auch binden Persistenz-Logik auch andere Veranstaltungen je nach Ihrer Anwendung-Anforderung.

    InformationsquelleAutor der Antwort Prakash Bhagat

  8. -1

    Stellen Sie sicher, dass die übermittlung des Formulars per POST. Wenn Sie die übermittlung per ajax, tun <form autocomplete="on" method="post">weglassen der action Attribut.

    InformationsquelleAutor der Antwort garageàtrois

  9. -1

    kann man mit "." in beiden iframe src und form Aktion.

     <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>

    InformationsquelleAutor der Antwort max zhou

Schreibe einen Kommentar