CODEWITHSUNDEEP
javascriptjqueryangularjsautocomplete
redrom
redrom

Reputation: 11642

Kendo Autocomplete with server filtering in Angular, how to?

I followed this example which describes basic working with Kendo Autocomplete in AngularJS.

Problem is that example works only with local defined data.

Could somebody post example how to work with remote JSON data source?

Link is: http://demos.telerik.com/kendo-ui/autocomplete/angular

Thanks for any advice.

Upvotes: 0

Views: 2157

Answers (2)

Eng Mahmoud Gamal
Eng Mahmoud Gamal

Reputation: 11

in html just use 

<input kendo-auto-complete  
        k-data-text-field="'ProductName'"
        k-data-value-field="'ProductID'"
        k-data-source="productsDataSource" />

in Js use

angular.module("KendoDemos", [ "kendo.directives" ])
  .controller("MyCtrl", function($scope){
      $scope.productsDataSource = {
        type: "JSON",
        serverFiltering: true,
        transport: {
            read: {
                url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
            }
        }
    };


  })

Upvotes: 0

JMK
JMK

Reputation: 28080

Just use $http, so something like this:

angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope, $http){

$http.get('/remoteDataSource').
    success(function(data) {
        $scope.countryNames = data;
    });
}

If the data is changing as you type, you could use a $watch also:

angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope, $http){

$scope.$watch('textboxValue', function(){
    $http.get('/remoteDataSource/' + $scope.textboxValue).
        success(function(data) {
            $scope.countryNames = data;
        });
    }
});

Upvotes: 2

Related Questions