Angular JS and jQuery UI autocomplete feature

Question

I am trying to build an autocomplete feature using pure angular but unfortunately UI is a bit tough to handle. I started building it with jQuery UI.

Then I came across a Fiddle http://jsfiddle.net/sebmade/swfjT/light/

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



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);
                }
            });
    };
});

I want to show the options only after user has entered 3 valid characters.

Thanks, Ankit Tanna

eladcon · Accepted Answer · 2015-03-31 07:50:56Z

2

You can use the minLength option:

iElement.autocomplete({
    source: scope[iAttrs.uiItems],
    minLength: 3,
    select: function() {
        $timeout(function() {
          iElement.trigger('input');
        }, 0);
    }
});

answered Mar 31, 2015 at 7:50

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ankit Tanna Over a year ago

Hi, Thanks a lot. This worked. :) I was not aware of the options.

Ankit Tanna Over a year ago

This is the proper solution :)

Collectives™ on Stack Overflow

Angular JS and jQuery UI autocomplete feature

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related