Kendo UI Angular JS and AutoComplete with a service

All we need is an easy explanation of the problem, so here it is.

I’m making an Angular App and I’m starting to use some of the Kendo UI controls. I’m having some issues wiring up the AutoComplete control. I would like to use a factory that will return the list of “auto complete” values from my database.

I have iincluded the auto complete control and I’m trying to use the k-options attribute:

<input kendo-auto-complete ng-model="myFruit" k-options="FruitAutoComplete"  />

In my controller the following hard coded list of fruits work:

 $scope.FruitAutoComplete = {
            dataTextField: 'Name',
            dataSource:[
                { id: 1, Name: "Apples" },
                { id: 2, Name: "Oranges" }
            ]
}

When I move this over to use my factory I see it calling and returning the data from the factory but it never get bound to the screen.

 $scope.FruitAutoComplete = {
            dataTextField: 'Name',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function () {
                        return    FruitFactory.getYummyFruit($scope.myFruit);
                    }
                }
            })
        }

I end up with the request never being fulfilled to the auto complete.

My factory is just returning an array of fruit [
my Fruit Factory Code:

     getYummyFruit: function (val) {
                    return $http.get('api/getFruitList/' + val)
                        .then(function (res) {                          
                            var fruits= [];
                            angular.forEach(res.data, function (item) {
                                fruits.push(item);
                            });
                            return fruits;
                        });
                }

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Here is your solution

http://plnkr.co/edit/iOq2ikabdSgiTM3sqLxu?p=preview

For the sake of plnker I did not add $http (UPDATE – here is http://plnkr.co/edit/unfgG5?p=preview with $http)
UPDATE 2 – http://plnkr.co/edit/01Udw0sEWADY5Qz3BnPp?p=preview fixed problem as per @SpencerReport

The controller

$scope.FruitAutoCompleteFromFactory = {
            dataTextField: 'Name',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                        return  FruitFactory.getYummyFruit(options)

                    }
                }
            })
        }

The factory –

factory('FruitFactory', ['$http',
  function($http) {
    return {
      getYummyFruit: function(options) {
        return $http.get('myFruits.json').success(
          function(results) {
            options.success(results);
          });

      }
    }
  }

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0