기본 양식 동작을 방지 할 때 입력 내용 자동 완성/제안

Question

IE와 Webkit으로 제한되는 흥미로운 버그가 있습니다. 나는 기본적인 형태의 설정이 : 난 그냥 일반 페이지 새로 고침을 통해 양식을 제출하면 이제

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

를, I는 입력 필드에 텍스트를 입력로 이동합니다 다음에, 나는 브라우저의 기본 자동 제안 기능 얻을 것이다 드롭 다운 (이것은 의도 된 동작입니다). 나는 형태로 출력 DIV 업데이트를 제출할 때 지금

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

을하지만, 이전 값이 나는 형태로 입력이 저장되지 않은 : 내가하기 위해 양식 제출 동작을 납치 - 해킹 경우, AJAX를 제출 입력 할 때 아무 제안도하지 않을 것입니다.

누구든지이 문제에 대한 창의적인 해결책이 있습니까? 어쩌면 (꿀풀) iframe?

Answer 1

IE 및 WebKit은 정상적으로 제출 된 값만 기억하며 AJAX를 통해 제출하는 값이므로 해당 엔진은 값을 기억하지 않습니다. iframe 대신에 자동 완성을 위해 jQuery 플러그인을 사용합니다 (예 : this one). 물론이 솔루션을 사용하면 과거에 사용자가 입력 한 내용을 유지해야합니다. 너무 어렵지 않아야합니다. 제출 제어에서 이러한 수정을

Answer 2

시험 :

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