Problems with jQuery autocomplete + AngularJS
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.
I had to do a bit more work to get this working using an $http service.
The service:
app.factory("AutoCompleteService", ["$http", function ($http) {
return {
search: function (term) {
return $http.get("http://YourServiceUrl.com/" + term).then(function (response) {
return response.data;
});
}
};
}]);
The directive:
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.YourDisplayProperty,
value: autocompleteResult
}
}))
});
},
minLength: 3,
select: function (event, selectedItem) {
// Do something with the selected item, e.g.
scope.yourObject= selectedItem.item.value;
scope.$apply();
event.preventDefault();
}
});
}
};
}]);
The html:
<input ng-model="YourObject" autocomplete />