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?

hope this help you http://stackoverflow.com/questions/15462991/trigger-autocomplete-without-submitting-a-form — Midhun Murali, Apr 21 '15 at 08:34
You might need to elaborate on this question slightly. Do you either want each user to see THEIR same data again next time, or do you want ALL users to see the SAME data in the autocomplete. Depending on the answer to this, either anhnv's or MuppetGrinder's answers may be best. — JLo, Apr 21 '15 at 12:03
I refer to the browser autocomplete mechanism. When a user return to the form, the browser, when you double click or start typing on a input field, shows you all the values you entered on that field (I think it is called forms history in some browsers, like Firefox) — Zelter Ady, Apr 21 '15 at 15:38
This implies that you want users to only see things that THEY have entered before, and you don't want them to see things that other users may have entered? — JLo, Apr 22 '15 at 11:00
Exactly. Only the values that were typed once on that field of the form. Is the browser autocomplete function. But this works only if the form was submitted. — Zelter Ady, Apr 22 '15 at 15:22

score 4 · Answer 1 · answered Apr 21 '15 at 09:39

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.

score 2 · Answer 2 · edited May 23 '17 at 12:14

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.

Sidd · Answer 3 · 2015-04-21T08:35:20.927

1

I have found autocomplete to work when there is an actual form attached and its submit event was actually triggered (even if the data was sent by AJAX). I would suggest to use a form with a submit button, and intercept the submission via Javascript (attaching to the form's onsubmit event) to prevent it and do it by AJAX.

Using a proper HTML form and preventing submit, instead of using just an input field, also has the benefit of activating your onsubmit handler when the user presses enter. I find that pretty useful as a user.

edited Apr 21 '15 at 08:35

answered Apr 21 '15 at 08:32

Sidd

1,389
7
17

1

The default value of `autocomplete` is `on`. So, i don't think this will make a difference. – Vigneswaran Marimuthu Apr 21 '15 at 08:34
You're right. _autocomplete_ is more useful as an "off" attribute when you wanna disable it. Have updated my answer. – Sidd Apr 21 '15 at 08:37

score 1 · Answer 4 · answered Apr 21 '15 at 09:45

You can try this:AutoComplete with jQuery

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

http://jsfiddle.net/sebmade/swfjT/

Hope this help you!

Unless I'm missing something there was no mention of Angular in the OP's question, this answer seems to be dependent on a tool that OP did not mention using. — Roy, Apr 21 '15 at 12:33

HTML input autocomplete

4 Answers4