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

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS

Introduction As our requirement is to implement search functionality and display various details or display corresponding rows, here is our model.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {
    var employees = [
        { name: "Akshay", dateOfBirth: new Date("July 21, 1960"), Address: "Mumbai", Salary: "1234.34" },
        { name: "Milind", dateOfBirth: new Date("July 20, 1960"), Address: "Nashik", Salary: "12.34" },
        { name: "Raghvan", dateOfBirth: new Date("July 19, 1960"), Address: "Pune", Salary: "1235.34" },
        { name: "Hari", dateOfBirth: new Date("July 18, 1960"), Address: "Mumbai", Salary: "5589.34" }
    ];
    $scope.employees = employees;
});

Here, our model contains an array in which we display the records containing name, DOB, address, and Salary. We attach it to that $scope object. Our View contains names and various details. We are binding those elements with binding expression and using the ng-repeat directive to loop through those records.  So, our View is

<table>  
    <thead>  
        <tr>  
            <th> Name </th>  
            <th>Date of Birth </th>  
            <th>Address </th>  
            <th>Salary </th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr ng-repeat="employee in employees">  
            <td>{{employee.name }}</td>  
            <td>{{employee.dateOfBirth }}</td>  
            <td>{{employee.Address }}</td>  
            <td>{{employee.Salary }}</td>  
            <%-- <td>{{employee.Salary| currency }}</td>--%>  
        </tr>  
    </tbody>  
</table>  

And, our output is

Now, we will add a textbox above that, by using an input tag. Then, we will be adding an 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 the $scope object as well. When you reload the page, you will get the following.

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 the 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.

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

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

Now, reload the page.

MultiSearch Functionality in AngularJS In this section, we will see how a 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.

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

Now, here, I will add a check box to check what we entered. If that exists, it will return True; otherwise 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.

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.

Now, if we want to search a specific column, or field, or value, we will write a function in our model.

$scope.search = function(item) {
    if ($scope.SearchText == undefined) {
        return true;
    }
}

Now, what this function will do? We have attached the search to $scope. The search will check the array. If it is undefined, it will return true, else false.

else {
    if (item.name.toLowerCase().indexOf($scope.SearchText.toLowerCase()) != -1 || item.Address.toLowerCase().indexOf($scope.SearchText.toLowerCase()) != -1) {
        return true;
    }
}

I am passing that item name in lowercase because I don’t want to search a case-sensitive text. And, its respective index and $scope.  search text is to be -1. So, our final model code is

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)  
{  
    var employees = [{  
        name: "Akshay",  
        dateOfBirth: new Date("July 21,1960"),  
        Address: "Mumbai",  
        Salary: "1234.34"  
    }, {  
        name: "Milind",  
        dateOfBirth: new Date("July 20,1960"),  
        Address: "Nashik",  
        Salary: "12.34"  
    }, {  
        name: "Raghvan",  
        dateOfBirth: new Date("July 19,1960"),  
        Address: "Pune",  
        Salary: "1235.34"  
    }, {  
        name: "Hari",  
        dateOfBirth: new Date("July 18,1960"),  
        Address: "Mumbai",  
        Salary: "5589.34"  
    }];  
    $scope.employees = employees;  
    $scope.search = function(item) {  
        if ($scope.SearchText == undefined) {  
            return true;  
        } else {  
            if (item.name.toLoweCase().indexOf($scope.SearchText.toLoweCase()) != -1 || item.Address.toLoweCase().indexOf($scope.SearchText.toLoweCase()) != -1) {  
                return true;  
            }  
        }  
        return false;  
    }  
});  

Now, just reload the page.

Conclusion

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