AngularJS Autocomplete input text example

AngularJS Autocomplete input text example

HTML autocomplete text box provides the suggestions while you type in the text box. Sometimes it is good to have some suggestions when you type something like country name, some query like google search engine. So you don’t need to type the whole sentence rather you can use the suggestion.

Today, we will create such text box which provides auto suggestion when you type into the box. We will create autocomplete input text using AngularJS.

Before we start let’s have a look on the directory structure which I am going to use in my example as below :


AngularJS autocomplete input example
AngularJS Autocomplete input example


Creating AngularJS Application Module:

First we need application js where you can define you module name which will be used in your application. app.js
var app = angular.module('app', []);

Creating controller

After defining you module name, we will start creating controller for the autocomplete box. I have created some functions inside the controller which will perform following actions :

initiateAutoSearch : This method will be executed when you will start typing in text box, after key press auto suggestion box will appear and you can select any suggestion from there. A service method will be called to fetch the results as we type.

selectedSearchResult : Assign selected search result to the text box.

app-controller.js
app.controller('autoCompleteController', function($scope, $window, autoSearchFactory) {

 $scope.inputWidth = '200';
 $scope.toggleAutoSearch = 'none';
 $scope.searchText = '';

 $scope.searchData = null;

 $scope.initiateAutoSearch = function() {
 $scope.toggleAutoSearch = 'visible';
 autoSearchFactory.getCountries($scope.searchText).then(function(data) {
 $scope.searchData = data;
 });
 }

 $scope.selectedSearchResult = function(input) {
 $scope.searchText = input;

 $scope.toggleAutoSearch = 'none';
 }
});

Autocomplete Directive

Created a directive for the purpose of autocomplete text box which will be used as element. Directive is using autocomplete.html as template and autoCompleteController as controller to control the actions of text box.

app-directive.js
app.directive("autoComplete", function() {
 return {
 restrict : "E",
 templateUrl : "js/views/autocomplete.html",
 controller : "autoCompleteController"
 };
});

Create Service for Autocomplete

Service is being used to fetch the results from the API. HTTP get method is being used to fetch the JSON object from the country name API form the source restcountries.eu.
The service is taking input from the controller and fetching the results from the API which is in the form of JSON object and then result is being passed back to the controller.

app-service.js
app.service('autoSearchFactory', function($http, $q, $window) {
 return {
 getCountries : function(countryName) {
 return $http.get('https://restcountries.eu/rest/v2/name/' + countryName).then(function(response) {
    return response.data;
   }, function(errResponse) {
    console.error('Error while fetching users');
    return $q.reject(errResponse);
   });
  }
 }
});
Template which is being used for directive.
<div class="input-box" style="width: {{inputWidth}}px;">
<input type="text" />
<div class="auto-result" style="width: {{inputWidth}}px; display: {{toggleAutoSearch}};">
<ul>
	<li>{{var.name}}</li>
</ul>
</div>
</div>
When everything has done, it is time to combine all of the elements together. In below html we are including service, directive, controller and app files and auto-complete tag is being used to show the autocomplete text box and suggestions as we type.

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Home</title>

							<link rel="stylesheet" type="text/css" href="css/main.css" />

</head>
<body ng-app="app">

<auto-complete></auto-complete>

<script type="text/javascript" src="lib/angular/angular.js"></script>

 <script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/service/app-service.js"></script>
 <script type="text/javascript" src="js/controller/app-controller.js"></script>
<script type="text/javascript" src="js/directive/app-directive.js"></script>

</body>
</html>
Now it is done 🙂

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *