Friday, September 19, 2014

Add input auto suggest (autocomplete) with AJAX (XMLHttpRequest)

When we submit a form , browser will add autocomplete with input (if enabled)

But ajax post won't effect

This is a solution:

1. Add a hide iframe with empty page

<iframe name="hiddenIframe" class="hide" src="javascript:false"></iframe>

2. Let your form target with the iframe

<form target="hiddenIframe" id="myForm">
    <input name="some_input" />
    <button onclick="ajaxPost(this);">btn</button>
</form>

3. Trigger a submit event on this form when you send a AJAX post for it

<script>

function ajaxPost(obj){

     $("#myForm").submit();

    //do your ajax post

}

</script>



OK, now the input can catch user insert string for browser auto suggetst(autocomplete)