Problems with jQuery autocomplete + AngularJS

Question

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

Answer 1

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.

Answer 2

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 />

Answer 3

HTML

 <input type="text" class="form-control ml-2" employeesearchautocomplete ng-model="employeeName" name="employeeName">

JS

 var myApp = angular.module("employeeSearchModule",[]);

        myApp.controller("employeeSearchController",function($scope,$http){

            $scope.message= "Welcome to angular js..."

        });

        myApp.directive('employeesearchautocomplete', function() {
            return {
                restrict: 'A',
                require : 'ngModel',
                link : function (scope, element, attrs, ngModelCtrl) {
                      element.autocomplete({
                          source : function(request, response) {
                            $.ajax({
                                type : "POST",
                                url : "searchEmployee.html",
                                data : request,
                                success : response,
                                dataType : 'json'
                            });
                        },
                        select : function(event, ui) {
                            event.preventDefault();
                            if (ui.item.value == '-1') {
                                scope.employeeName ='';
                                scope.$apply();
                            } else {
                                scope.employeeName = ui.item.label;
                                scope.$apply();

                            }
                        },
                        focus : function(event, ui) {
                            event.preventDefault();
                            scope.employeeName = ui.item.label;
                            scope.$apply();
                        },
                        change : function(event, ui) {
                            if (!ui.item) {
                                scope.employeeName ='';
                                scope.$apply();

                            }
                        }
                      },{
                            minLength : 2
                      });


                }
            }
        });

Order of script files import

• All your jquery
• AngularJs library
• your angular script for autocomplete

I hope this will help someone.