Issue with Autocomplete Directive in AngularJS

Question

I tried to implement Textbox auto-complete with "autocomplete" directive of Angular but it is not recognized by application. Here is my app:

var app = angular.module('app', [
'ngRoute',
'ngCookies',

]);

app.service('AutoCompleteService', ['$http', function ($http) {
return {
    search: function (term) {
        return $http.get('https://myapi.net/suggest?query='+term+'&subscription-key=XYZ').then(function (response) {
            return response.data;
        });
    }
};

}]);

app.directive('autoComplete', ['AutoCompleteService', function (AutoCompleteService) {
return {
    restrict: 'A',
    link: function (scope, elem, attr, ctrl) {
        elem.autocomplete({
            source: function (searchTerm, response) {
                AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                    response($.map(autocompleteResults, function (autocompleteResult) {
                        return {
                            label: autocompleteResult.ID,
                            value: autocompleteResult.Val
                        }
                    }))
                });
            },
            minLength: 3,
            select: function (event, selectedItem) {
                // Do something with the selected item, e.g. 
                scope.yourObject = selectedItem.item.value;
                scope.$apply();
                event.preventDefault();
            }
        });
    }
};

}]);

And I placed directive name as follows:

<input type="text" id="search" ng-model="searchText" placeholder="Enter Search Text" autocomplete />

Still AutoCompleteService is not called by directive. Am I doing anything wrong here?

Ghassen Louhaichi · Accepted Answer · 2014-12-26 11:54:14Z

1

It is not that your service is not called from the directive, it is that your directive is not called at all based on the html you've provided. You should call a directive by transforming camel case notation to a dashed notation, as follows :

<input id="search" ng-model="searchText" auto-complete />

You can find all about directive matching in the AngularJS Directive Documentation.

answered Dec 26, 2014 at 11:54

Ghassen Louhaichi

111 bronze badge

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

6 Comments

tom Over a year ago

Actually when I am writing it as "auto-complete" I am getting error message as: **Error: i.autocomplete is not a function ** .

Ghassen Louhaichi Over a year ago

Yes, and that is because "auto-complete" is the right way to call your directive, which explains why you did not get the error when you called your directive with "autocomplete" as in that case the directive code was not interpreted at all. So when it was successfully called in the first case, it did not find the autocomplete function. Are you sure you included jQuery as well as jQuery-UI ?

tom Over a year ago

Thanks for pointing that, I did not include jquery and jquery-UI but after including that the above error is gone but still autocomplete is not working.

Ghassen Louhaichi Over a year ago

You can try to replace your source function with a simpler one as follows : source: function (searchTerm, response) { return ['aaa', 'bbb']; } Also, do not forget that you need to type at least 3 characters for the autocomplete to trigger. If the autocomplete triggered after three characters then you would know that the issue comes from your service.

tom Over a year ago

Thanks for suggesting that! I replaced the source with simpler form but autocomplete did not trigger. Is bootstrap-UI is problamatic?

|

Collectives™ on Stack Overflow

Issue with Autocomplete Directive in AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related