Getting inputs to auto-complete/suggest when preventing default form behavior

Question

Hi Guys, Interesting bug here that seems to be limited to IE and Webkit. I have a basic form 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>

Now if I just submit the form through a normal page refresh, the next time I go to type text into the input field, I will get the browser's default auto-suggest dropdown (this is the intended behavior). However, if I highjack the form submission behavior in order to do an AJAX submit:

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

Now when I submit the form, the output div updates, but the previous values that I input into the form aren't stored and no suggestions will be made when you type.

Does anyone have any creative solutions to this problem? Maybe an (gulp) iframe?

Answer 1

IE and WebKit only remember values that were submitted normally, and since you are submitting it through AJAX, those engines do not remember the values. Instead of an iframe, I would use a jQuery plugin for the autocomplete, like this one. Of course, with that solution, you will need to maintain a listing of what a user has typed in the past, which shouldn't be too hard.

Answer 2

test with these modifications in controlling submit:

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