Autocomplete in AngularJS

By | May 2, 2017

In this post, we will learn how to autocomplete on a textbox in angularjs with example. Autocomplete provides suggestions while you type into the field. For example a user types the letter ‘I‘ in textbox of country, autocomplete displays matches suggestions like India, Iraq, Indonesia etc.

Example:

Step 1: First create a module which define the angular application.

var app = angular.module('app', [ "angucomplete"]);

Step 2: Create a controller and add all the suggestion or get suggestion in json format via angular service.

app.controller('MainController', ['$scope', '$http',
 function MainController($scope, $http) {

 $scope.countries = [
 {name: 'Afghanistan', code: 'AF'},
 {name: 'Aland Islands', code: 'AX'},
 {name: 'Albania', code: 'AL'},
 {name: 'Algeria', code: 'DZ'},
 {name: 'American Samoa', code: 'AS'},
 //.....................
 ];

 }
]);

Step 3: Download the autocomplete CSS and JS files and add all references in Index.html page

<html>
<head>
 <title>Autocomplete</title>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
 <script src="js/app/app.js"></script>
 <script src="js/app/controllers/main-controller.js"></script>
 <script src="js/app/directives/angucomplete.js"></script>
 <script src="angucomplete.js"></script>

 <link rel="stylesheet" href="css/angucomplete.css" />
 <link href="css/Style.css" rel="stylesheet" />
</head>
<body ng-app="app">
 <div ng-controller="MainController">
 <h1>Autocomplete</h1>
 <div class="large-padded-row">
 <h3>Select Country</h3>
 <div class="padded-row">
 <angucomplete id="ex1" placeholder="Search countries" pause="100" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name" minlength="1" inputclass="form-control form-control-small" matchclass="highlight" />
 </div>

 </div>

 </div>
</body>
</html>

 

Run the Index.html page and see the Output as below:

 

Download the source code

 

I hope you will enjoy to learn about Autocomplete in AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Like it? Share it
  • Brijesh Tiwari

    This site is Very useful for me… thans and keep posting.