HTML input autocomplete

Question

I have a page with some input fields. The data from this page is sent to the server without using form submit. I have a JavaScript that collects the data, creates a JSON and sends it to the server using Ajax call.

The issue in this case is that the browser doesn't save the data in order to offer autocomplete for the next time when the user fills the same form.

Is any way to avoid this? I need a way to offer autocomplete! Any trick?

Answer 1

I use html5 browser storage for these kinds of things. There is a pretty good introduction to it here This allows data persistence on the client side for most modern browsers. You can use this to capture form data and re-render it as often as you like.

Answer 2

Have you tried the method outlined in Trigger autocomplete without submitting a form. This worked for me.

Basically trigger a click on the submit button of a form and get the form to open an empty page in a hidden iframe. It's obviously a hack but it literally clicks the form submit button, submits the form and opens a new page so naturally it works in every browser I've checked in.

To quote the example markup here:

<iframe id="remember" name="remember" class="hidden" src="/content/blank">    
</iframe>

<form target="remember" method="post" action="/content/blank">

  <fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" value="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="">
  </fieldset>

  <button id="submit-button" type="submit" class="hidden"></button>

</form>

Then trigger the submit with $("#submit-button").click() when processing the form through ajax.