Unable to use jquery jquery.autocomplete.js in angularjs

Question

I am trying to make autocomplete on input Text search field with help of jquery.autocomplete.js in angularjs. But it is not working.I checked firebug console there is no error.Please help me.

code

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        elem.autocompleteArray({
            source: autoCompleteDataService.getSource(), 
            minLength: 2
        });
    }
};

});

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

Html code

 <input type="text" auto-complete/>

Are you sure your service is injected correctly into your directive? — jahller
– jahller, Commented Mar 25, 2014 at 8:11
check via chrome or firebug debugger if the injected "autoCompleteDataService" has the functions you defined in your service. or use a console.log(autoCompleteDataService) — jahller
– jahller, Commented Mar 25, 2014 at 8:22

Alex Choroshin · Accepted Answer · 2014-03-25 10:23:21Z

1

you have couple of syntax mistakes, some missing braces, naming and lastly, you forgot to surround the element with JQuery, in any case here's a working example using JQuery ui autocomplete .

Example:

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        $(elem).autocomplete({
            source: autoCompleteDataService.getSource(), 
            minLength: 2
        });
    }
    }})

Live example: http://jsfiddle.net/choroshin/gKcMP/

Update:

Working example with JQuery autocomplete plugin (only works with jquery version <1.9)

var app=angular.module('App', []);

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        $(elem).autocompleteArray(autoCompleteDataService.getSource(),{
             minLength: 2
        });
    }
    }})

Live Example: http://jsfiddle.net/choroshin/gKcMP/2/

edited Mar 25, 2014 at 10:23

answered Mar 25, 2014 at 9:12

Alex Choroshin

6,1872 gold badges31 silver badges36 bronze badges

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

5 Comments

sar Over a year ago

@Alex.its not working for me..i tried to console.log(autoCompleteDataService) in firebug console it gives me Reference Error: autoCompleteDataService is not defined.Can you tell me how to correct this?

Alex Choroshin Over a year ago

as I said you have some missing braces in your directive, have you tried looking at my live example?

sar Over a year ago

yes..you are using jquery-ui.js and i am using jquery.autocomplete.js . so elem.autocompleteArray is correct synatx as per this..

sar Over a year ago

MinLength did not work..and i tried minChars this also did not work

Alex Choroshin Over a year ago

this is a plugin problem and not angular.

Collectives™ on Stack Overflow

Unable to use jquery jquery.autocomplete.js in angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related