Autocomplete In Angularjs Using Directive And Factory

Autocomplete In Angularjs
Autocomplete in Angularjs

The Autocomplete textbox is used for providing a suggestion when we are typing into the input box (text field). You notice when we typing in the Google search, that is called Autocomplete. It is mostly used for instant search from the predefined or AJAX based listing.

Use of filters is also known part in Angularjs. Filters are used for filtering the data based on passed argument. Filters are used in template files in angularjs. In filters, we can use expressions as well. And we are going to use all these for getting the autocomplete functionality.

Example of filters in template file is,

Ex.(ng-repeat="i in items | filtersearch:searchString").

Here, filtersearch is a name of filter and ‘searchString’ is arguments that it will passed text parameter. Whatever we will put into the Textbox, it will be passed as an array and it will be stored as an elements of an Array.

Note: Here you also need to supply ‘searchString’ this as your ng-model name for input search box in web development service.

Let me walk you through how to create Autocomplete textfield 

1. Make a Simple form to create autocomplete textfield

Create a one input textfield, give a ng-change event in this text field 
And give one ng-model name for this text field,and And Also Create a one select box it would be ‘multiple’ also give ng-style  because whenever user selects text from the list then selected item will be copied in the text box and we also need to hide the list.

<div>
<input type="text" ng-model="searchString"  ng-change="searching()" ng-keydown="changecursor($event)" id="input" autofocus><br>
<select id="select" ng-style="vis" ng-model="txt" ng-click="copy($event)" ng-keypress="copy($event)" ng-keydown="changecursor($event)” multiple>
<option ng-repeat="i in items | filtersearch:searchString">{{i.string}}</option>
</select >
</div>

Here, ng-model="txt" is used for copy text into the text field.

2. Make a simple filter and Controller for data store and fetch

Create one filter to retrieve a data and and store into the select -> option. First of all we will create a filter.

.filter('filtersearch',function()
{   return function(arr, searchString){ 
     if(!searchString){
          return arr;   }
        var result = [];
             angular.forEach(arr, function(item){
            if(item.string.indexOf(searchString) !== -1){
                 result.push(item);
                }
               });
        return result;
    };
});

Here, ‘result’ will push keyword (String) into result array, using push() function it will push the elements in array and will show to the user whenever he starts typing in text field.

3. Creating Controller

In Controller first we Create one Array to store data into the select box.

$scope.items = 
    [      {string: 'Checking the network cables, modem, and router'},
       {…….. …………… ……      . ……………… ……… …..},
       {…….. …………… ……      . ……………… ……… …..}, 
             {…….. ……………}....n
            ];
        $scope.searching=function(){
             if($scope.searchString.length>0){
                $scope.vis={'visibility': 'visible'};}
            else{$scope.vis={'visibility': 'hidden'};
        }
        $scope.changecursor=function($event){               
                if ($event.keyCode == 40)
                {document.getElementById("select").focus();
                    if(document.getElementById("select").selectedIndex>0){
                    }else{    document.getElementById("select").selectedIndex=0;}
                }if ($event.keyCode ==38){
                          if(document.getElementById("select").selectedIndex==0)
{document.getElementById("input").focus();}}   
}
        $scope.copy=function($event)
        {           if($event.keycode==38){}
                else if ($event.keycode==40){}
                else{$scope.searchString=$scope.txt;
document.getElementById("input").focus();}    $scope.vis={'visibility': 'hidden'};        
        }

Here, searching is a function which checks for the input inside the text box and if it is empty then it will hide the list, and changecursor is a function which focusing for search box to select box and select box to search box.

Copy is a function which copies the selected item from the list into the text box and hides the list.

This is pretty simple example of achieving autocomplete functionality in Angularjs same as we are having in JQuery. Hope this helped you and enjoyed. Feel free to share your inputs and feedbacks.