AngularJS search filter

Search functionality AngularJS

  • The “filter” picks a subset of an array according to filter criteria and it returns an array containing only the matching items.
    • In this example, we have taken a textbox and predefined list of employees. When a user types ‘a’ in the textbox, only matching records will appear in the list.
  • You can use ng-model directive on an input field, which will use the value of the input field as an expression in a filter.
Please refer the given hierarchy of files and folders.

demo

Example: Search functionality in AngularJS

File Name: Script.js in Scripts folder.

/// <reference path="angular.min.js" />

var myApp = angular.module("myModule", []);
var myController = function ($scope)
     {
          var Employee = [
          {
               LastName: "Parihar",Gender: "Male",Address: "Pune",
          },
          {
               FirstName: "Shiva",LastName: "Parihar",Gender: "Male",Address: "Pune",
          },
          {
               FirstName: "Mili",LastName: "Zen",Gender: "Female",Address: "US",
          },
          {
               FirstName: "Divya",LastName: "Singh",Gender: "Female",Address: "Nagpur",
          },
          {
               FirstName: "Digvijay",LastName: "Chauhan",Gender: "Male",Address: "Pune",
          }];
     $scope.Emp = Employee;
     };
myApp.controller("myCont", myController);


Code for Demo.html:

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
          <script src="Scripts/Script.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <div ng-controller="myCont">
               <h3>Search functionality in AngularJS.</h3>
               <br/>
               <h3> Search Employee : <input type="text" ng-model= "searchEmp"/></h3>
               <br/><br/>
               <table>
                    <tr>
                         <th>FirstName</th>
                         <th>LastName</th>
                         <th>Gender</th>
                         <th>Address</th>
                    </tr>
                    <tr ng-repeat="e in Emp | filter:searchEmp">
                         <td>{{e.FirstName}}</td>
                         <td>{{e.LastName}}</td>
                         <td>{{e.Gender}}</td>
                         <td>{{e.Address}}</td>
                    </tr>
               </table>
          </div>
     </body>
</html>


Output:
search functionality

Type some letters in the textbox you will see the record accordingly. I have written Parihar in the textbox, so only those records are seen which have Parihar as matching text. So the text written in textbox is used as search criteria in orderBy filter.

search functionality

Suppose that you want search functionality about particular column (Lets Address), then make a slight change in ng-model directive.
ng-model= "searchEmp.Address"
▲