CODEWITHSUNDEEP
javascripthtmlautocomplete
Zelter Ady
Zelter Ady

Reputation: 6338

HTML input autocomplete

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?

Upvotes: 11

Views: 2643

Answers (4)

RichieAHB
RichieAHB

Reputation: 2088

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.

Upvotes: 3

anhnv
anhnv

Reputation: 40

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!

Upvotes: 0

MuppetGrinder
MuppetGrinder

Reputation: 234

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.

Upvotes: 4

Sidd
Sidd

Reputation: 1397

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.

Upvotes: 1

Related Questions