Problems with jQuery autocomplete + AngularJS
angularjs, jquery, jquery-autocomplete, jquery-ui
Solution
Perhaps you just need to do it in an "angular way"... that is, to use a directive to set up your DOM elements and do event bindings, use a service to get your data, and use a controller to do your business logic... all while leveraging the dependency injection goodness that is Angular...
A service to get your autocomplete data...
app.factory('autoCompleteDataService', [function() {
return {
getSource: function() {
//this is where you'd set up your source... could be an external source, I suppose. 'something.php'
return ['apples', 'oranges', 'bananas'];
}
}
}]);
a directive to do the work of setting up the autocomplete plugin.
app.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
// elem is a jquery lite object if jquery is not present,
// but with jquery and jquery ui, it will be a full jquery object.
elem.autocomplete({
source: autoCompleteDataService.getSource(), //from your service
minLength: 2
});
}
};
});
And using it in your markup... notice the ng-model to set a value on the $scope with what you select.
<div ng-controller="Ctrl1">
<input type="text" ng-model="foo" auto-complete/>
Foo = {{foo}}
</div>
That's just the basics, but hopefully that helps.
Problem
i'm using AjgularJS on my page and want to add a field to use autocomplete from jqueryui and the autocomplete does not fires the ajax call. i've tested the script on a page without angular (ng-app and ng-controller) and it works well, but when i put the script on a page with angularjs it stops working. any idea? jquery script: ``` $(function () { $('#txtProduct').autocomplete({ source: function (request, response) { alert(request.term); }, minLength: 3, select: function (event, ui) { } }); }); ``` - interesting note: when i call the script on Chrome inspector the autocomplete starts working!!! - Versions: AngularJS: 1.0.2 - JqueryUI: 1.9.0 CONCLUSION: The autocomplete widget from jQueryUI must be initializes from inside a custom directive of AngularJS as the example: Markup ``` <div ng-app="TestApp"> <h2>index</h2> <div ng-controller="TestCtrl"> <input type="text" auto-complete>ddd</input> </div> </div> ``` Angular script ``` <script type="text/javascript"> var app = angular.module('TestApp', []); function TestCtrl($scope) { } app.directive('autoComplete', function () { return function postLink(scope, iElement, iAttrs) { $(function () { $(iElement).autocomplete({ source: function (req, resp) { alert(req.term); } }); }); } }); </script> ```