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, 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,

<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 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:



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.



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.



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.



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

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 had attached search to $scope. The search will check the array. If it is undefined, it will return true, else false.

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

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,

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 search in AngularJS . Hope this article was helpful.