Obtenir des entrées pour compléter automatiquement / suggérer lorsque prévenir le comportement de formulaire par défaut - javascript, jquery, ajax, formulaires

Bug intéressant qui semble limité à IE et Webkit. J'ai une configuration de formulaire de base:

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

Maintenant, si je soumets simplement le formulaire par le biais d'unl'actualisation de la page, la prochaine fois que je vais taper du texte dans le champ de saisie, j'obtiendrai la liste déroulante de suggestion automatique par défaut du navigateur (c'est le comportement prévu). Cependant, si je détourne le comportement de soumission du formulaire pour faire un AJAX soumet:

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

Maintenant, lorsque je soumets le formulaire, la div de sortie est mise à jour, mais les valeurs précédentes que j'entre dans le formulaire ne sont pas stockées et aucune suggestion ne sera faite lorsque vous tapez.

Quelqu'un at-il des solutions créatives à ce problème? Peut-être un (gorgée) iframe?

Réponses:

IE et WebKit se souviennent uniquement des valeurs qui étaientsoumis normalement, et puisque vous le soumettez via AJAX, ces moteurs ne se souviennent pas des valeurs. Au lieu d'un iframe, j'utiliserais un plugin jQuery pour la saisie semi-automatique, comme celui-là. Bien sûr, avec cette solution, vous devrez conserver une liste de ce qu'un utilisateur a tapé dans le passé, ce qui ne devrait pas être trop difficile.

tester avec ces modifications dans le contrôle soumettre:

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