Erhalten Sie Eingaben zum automatischen Ausfüllen / Vorschlagen, wenn Sie das Standardverhalten von Formularen verhindern - Javascript, Jquery, Ajax, Formulare

Interessanter Fehler hier, der auf IE und Webkit beschränkt zu sein scheint. Ich habe ein grundlegendes Formular-Setup:

<div id="output">Form output is displayed here</div>

<form id="myForm" action="#" method="post">
<input type="text" name="username" id="usernameInput" />
<input type="submit" value="Submit" />
</form>

Nun, wenn ich das Formular nur über ein normales abschickeSeitenaktualisierung: Wenn ich das nächste Mal Text in das Eingabefeld eingebe, wird das standardmäßige Dropdown-Menü für automatische Vorschläge des Browsers angezeigt (dies ist das beabsichtigte Verhalten) AJAX einreichen:

$("#myForm").submit(function () {
$("#output").text($("usernameInput").val());
return false;
});

Wenn ich das Formular abschicke, wird das Ausgabe-Div aktualisiert, aber die vorherigen Werte, die ich in das Formular eingegeben habe, werden nicht gespeichert und es werden keine Vorschläge gemacht, wenn Sie eingeben.

Hat jemand kreative Lösungen für dieses Problem? Vielleicht ein (Schluck) iframe?

Antworten:

IE und WebKit merken sich nur Werte, die warenNormalerweise gesendet, und da Sie es über AJAX senden, erinnern sich diese Engines nicht an die Werte. Anstelle eines Iframes würde ich ein jQuery-Plugin für die automatische Vervollständigung verwenden, wie z dieses. Natürlich müssen Sie bei dieser Lösung eine Liste der von einem Benutzer in der Vergangenheit eingegebenen Daten führen, was nicht zu schwierig sein sollte.

Test mit diesen Modifikationen in Controlling Submit:

$("#myForm").submit(function (e) {
e.stopPropagation();
$("#output").html($("#usernameInput").val() + "<br />");
});