Search And MultiSearch In AngularJS

In this article, you will learn about search and multisearch in AngularJS.

Overview

In this article, we will be looking at the search functionality in AngularJS. Here, the requirement is to search name,address, and so on, to display the corresponding results or rows.

For more articles on AngularJS, kindly refer to,

Introduction

As our requirement is to implement search functionality and display various details or display corresponding rows, here is our model:
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope)  
  2. {  
  3.     var employees = [{  
  4.         name: "Akshay",  
  5.         dateOfBirth: new Date("July 21,1960"),  
  6.         Address: "Mumbai",  
  7.         Salary: "1234.34"  
  8.     }, {  
  9.         name: "Milind",  
  10.         dateOfBirth: new Date("July 20,1960"),  
  11.         Address: "Nashik",  
  12.         Salary: "12.34"  
  13.     }, {  
  14.         name: "Raghvan",  
  15.         dateOfBirth: new Date("July 19,1960"),  
  16.         Address: "Pune",  
  17.         Salary: "1235.34"  
  18.     }, {  
  19.         name: "Hari",  
  20.         dateOfBirth: new Date("July 18,1960"),  
  21.         Address: "Mumbai",  
  22.         Salary: "5589.34"  
  23.     }];  
  24.     $scope.employees = employees;  
  25. });  
Here, our model contains an array in which we display the records containing name, DOB, address, Salary. We attach it to that $scope object .

Our View contains name and various details. We are binding those elements with binding expression and using ng-repeat directive to loop through those records. 

So, our View is,
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th> Name </th>  
  5.             <th>Date of Birth </th>  
  6.             <th>Address </th>  
  7.             <th>Salary </th>  
  8.         </tr>  
  9.     </thead>  
  10.     <tbody>  
  11.         <tr ng-repeat="employee in employees">  
  12.             <td>{{employee.name }}</td>  
  13.             <td>{{employee.dateOfBirth }}</td>  
  14.             <td>{{employee.Address }}</td>  
  15.             <td>{{employee.Salary }}</td>  
  16.             <%-- <td>{{employee.Salary| currency }}</td>--%>  
  17.         </tr>  
  18.     </tbody>  
  19. </table>  
And, our output is,

output

Now, we will add a textbox above that, by using input tag. Then, we will be adding ng-model directive to it.

Search By: <input type="text" placeholder"Search By" ng-model="SearchText" />

Now, you can see that we don’t have that property SearchText. In our model, we will be displaying those dynamically and attaching those in $scope object as well.

When you reload the page, you will get the following:

output

So, at the moment, search functionality is not implemented. We want to search by various fields, like address etc. So, we are going to use a filter in ng-repeat directive and in that, we will pass that ng-model to it, as shown below:

<tr ng-repeat="employee in employees|filter :SearchText">

Now, when you reload the page, just type what you want.

output

Now, if you want to search a specific column name, then you need to modify just input element, as shown below:

Search By : <input type="text" placeholder="Search By" ng-model="SearchText.Address" />

Now, reload the page.

output

MultiSearch Functionality in AngularJS

In this section, we will be seeing how search with multiple column names returns if that column exists. We will be using the previous example here to do that.

We will be adding another input box to that, such as city. We will be searching that from the Address, as shown here:

Search Address: <input type="text" placeholder="Search Address" ng-model="SearchText.Address" />

Now, just reload the Page.

output

Seach By Name and Address;  when you start typing in the city; it will display the cities.

output

Now, here, I will add a check box to check what had we entered. If that exists, it will return True; else it will return False.

<input type="checkbox" ng-model="Check" /> Check

Now, we will pass that ng-model check to ng-repeat.

<tr ng-repeat="employee in employees|filter :SearchText:Check">

Now, just reload the page.

output

output

Now, we will see how to implement a single textbox and implement those search functionalities in each field. 

Search By : <input type="text" placeholder="Search Records" ng-model="SearchText" />

 And,

<tr ng-repeat="employee in employees|filter :SearchText">


Now, just reload the page and search through.

output

output

Now, if we want to search a specific column, or field, or value, we will write a function in our model.
  1. $scope.search = function(item)   
  2. {  
  3.     if ($scope.SearchText == undefined) {  
  4.         return true;  
  5.     }  
  6. }  
Now, what this function will do? We had attached search to $scope. The search will check the array. If it is undefined, it will return true, else false.
  1. else {  
  2.     if (item.name.toLoweCase().indexOf($scope.SearchText.toLoweCase()) != -1 || item.Address.toLoweCase().indexOf($scope.SearchText.toLoweCase()) != -1) {  
  3.         return true;  
  4.     }  
  5. }  
I am passing that item name in lowercase because I don’t want to search a casesensitive text. And, its respective index and $scope.searchtext is to be -1.

So, our final model code is,
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope)  
  2. {  
  3.     var employees = [{  
  4.         name: "Akshay",  
  5.         dateOfBirth: new Date("July 21,1960"),  
  6.         Address: "Mumbai",  
  7.         Salary: "1234.34"  
  8.     }, {  
  9.         name: "Milind",  
  10.         dateOfBirth: new Date("July 20,1960"),  
  11.         Address: "Nashik",  
  12.         Salary: "12.34"  
  13.     }, {  
  14.         name: "Raghvan",  
  15.         dateOfBirth: new Date("July 19,1960"),  
  16.         Address: "Pune",  
  17.         Salary: "1235.34"  
  18.     }, {  
  19.         name: "Hari",  
  20.         dateOfBirth: new Date("July 18,1960"),  
  21.         Address: "Mumbai",  
  22.         Salary: "5589.34"  
  23.     }];  
  24.     $scope.employees = employees;  
  25.     $scope.search = function(item) {  
  26.         if ($scope.SearchText == undefined) {  
  27.             return true;  
  28.         } else {  
  29.             if (item.name.toLoweCase().indexOf($scope.SearchText.toLoweCase()) != -1 || item.Address.toLoweCase().indexOf($scope.SearchText.toLoweCase()) != -1) {  
  30.                 return true;  
  31.             }  
  32.         }  
  33.         return false;  
  34.     }  
  35. });  
Now, just reload the page.

output

Conclusion

So, this was about search and multiple search in AngularJS . Hope this article was helpful.