AngularJS: Kendo UI AutoComplete

by David Loo | Nov 9, 2014 | AngularJS

If you are using Kendo UI for your current project and require a string input box with auto complete, Kendo’s AutoComplete directive can do the trick. The AutoComplete can use a custom template to format the results. In this blog I am going to demonstrate how to use Kendo UI’s AutoComplete and let you know what to expect from it.

Below I have a HTML markup to define my controller and an input control that uses the kendo-auto-complete directive and k-options attribute for configuring the directive.

<div ng-controller="AppController">
	<h4>Kendo UI AutoComplete</h4>
	<p>Enter a country name that starts with the letter 'A'</p>
	<input kendo-auto-complete ng-model="country" k-options="options" class="form-control"/>
	<p>Your selection: {{ country }}</p>
</div>

Below in my JavaScript I am going to create an AngularJS module called “app” and include “kendo.directives” module. Then I create a controller called “AppController” and within this controller I am defining an array of country names and their codes. I have created a variable called $scope.country and this is where we are going to store the selected value from the AutoComplete.

angular.module('app', ['kendo.directives'])
.controller('AppController', ['$scope', function($scope) {
	$scope.countries = [ 
	  {name: 'Afghanistan', code: 'AF'}, 
	  {name: 'Åland Islands', code: 'AX'}, 
	  {name: 'Albania', code: 'AL'}, 
	  {name: 'Algeria', code: 'DZ'}, 
	  {name: 'American Samoa', code: 'AS'}, 
	  {name: 'AndorrA', code: 'AD'}, 
	  {name: 'Angola', code: 'AO'}, 
	  {name: 'Anguilla', code: 'AI'}, 
	  {name: 'Antarctica', code: 'AQ'}, 
	  {name: 'Antigua and Barbuda', code: 'AG'}, 
	  {name: 'Argentina', code: 'AR'}, 
	  {name: 'Armenia', code: 'AM'}, 
	  {name: 'Aruba', code: 'AW'}, 
	  {name: 'Australia', code: 'AU'}, 
	  {name: 'Austria', code: 'AT'}, 
	  {name: 'Azerbaijan', code: 'AZ'}
	];
	
	$scope.country = '';
	
	$scope.options = {
		dataTextField: 'name',
		dataSource: $scope.countries,
		template: 'Code: #: code#<br>Name: #: name#',
	}
}]);

Now the interesting part, I have created a $scope.options configuration object that will be used by Kendo’s AutoComplete directive. In the options I have  dataTextField set as “name” which means that when we select a value from the AutoComplete the name property value from the array will be used to populate the model. Datasource will be the array of countries with their name and code, and template which is optional.

	$scope.options = {
		dataTextField: 'name',
		dataSource: $scope.countries,
		template: 'Code: #: code#<br>Name: #: name#',
	}

The template I am using is a custom template for showing matching results. If you dont use it it will just show what ever you have specified in the dataTextField property. Here I have created a very simple template that will display the name and code of the country. Display property is a template you must wrap the property name with a hash character, and the first hash character must follow by a colon.

#: name#

Your can clone a copy of my source code from Git Hub: Learn AngularJS Repository