Written by Siddartha Thota on September 24, 2014 in AngularJS > Scripting

How to develop a simple Angular client-side Search Filter?

GET ALERTS:

Get our Latest updates delivered to your mailbox!

In this tutorial, we are going to show you how to develop a simple Search Filter in AngularJS by using JSON data. Our previous post is about Creating Grid-View in AngularJS by using ng-grid, and you can consider it as an extension. Now, we are going to filter the required results in our grid. This is a very basic client side-filtering technique and a basic thing that you need to be aware if you are going to do server side search functionality using AngularJS (this can be done by using Ajax Calls).

What am I going to show you today?

Well, I’m going to create a Grid and a single search box, in which I’ll be able to search all the matching elements in the grid whenever I type something in the search field. I’m not using any individual search for individual fields of the Grid, but I’m just using the single common search field. So, lets jump into the tutorial.

Check out my instructions or else you can download our source code below or you can play with our code on Plnkr.

Download Source Code

Create a HTML file (index.html)


<!DOCTYPE html>
<html ng-app="gridDemo">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" align="center">
<h2>Angular Sample Search Filter </h2>
</div>
<br>
<div class="form-search" role="search">
<div class="row">
<label for="Sample Search" class="control-label col-xs-6 col-md-2">Search Filter</label>
<div class="col-xs-6 col-md-4">
<input type="text" id="Search" class="form-control" placeholder="Search" ng-model="search">
</div>
</div>
</div>
<br>
<!-- Results Grid -->
<div class="table-responsive" ng-controller ="GridController">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td><b>Select</b></td>
<td class="hidden-xs"><b>Company Name</b></td>
<td><b>Manager First Name</b></td>
<td><b>Manager Last Name</b></td>
<td><b>Salary</b></td>
<td class="hidden-xs"><b>State</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="manager in managers | filter:search">
<td><input type="checkbox"></td>
<td class="hidden-xs">{{manager.companyName}}</td>
<td>{{manager.managerFName}}</td>
<td>{{manager.managerLName}}</td>
<td>{{manager.salary}}</td>
<td class="hidden-xs">{{manager.state}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Now create a folder named JS and then create a controllers.js file which is going to be your Angular Controller file in which you’ll have data definitions and other controls.

Create a Javascript file (Controllers.js)


var gridModule = angular.module('gridDemo', []);
sampleManagers = [{"companyName" : "TacoBell", "managerFName" : "Harris", "managerLName" : "Loyd", "salary" : "$8000", "state" : "Alaska"},
{"companyName" : "McDonalds", "managerFName" : "Chris", "managerLName" : "Theil", "salary" : "$7222", "state" : "Georgia"},
{"companyName" : "KFC", "managerFName" : "Jonathan", "managerLName" : "Port", "salary" : "$6330", "state" : "Massachusetts"},
{"companyName" : "Pizzahut", "managerFName" : "Laura", "managerLName" : "Jackson", "salary" : "$4793", "state" : "Texas"},
{"companyName" : "Dominos", "managerFName" : "Peter", "managerLName" : "Thomas", "salary" : "$7300", "state" : "New York"},
{"companyName" : "PhoHong", "managerFName" : "Yen", "managerLName" : "Lee", "salary" : "$5613", "state" : "New Jersey"},
{"companyName" : "Starbucks", "managerFName" : "Alex", "managerLName" : "Steve", "salary" : "$7130", "state" : "California"},
{"companyName" : "Chiportle", "managerFName" : "Robert", "managerLName" : "Mannings", "salary" : "$8035", "state" : "New York"},
{"companyName" : "IndianDoor", "managerFName" : "Rama", "managerLName" : "Sethu", "salary" : "$8090", "state" : "South Carolina"},
{"companyName" : "TajMahal", "managerFName" : "Subash", "managerLName" : "Chandra", "salary" : "$7099", "state" : "Florida"}
];
function GridController($scope, $location) {

$scope.managers = sampleManagers;
$scope.gotoHire = function (relativePath) {
$location.path(relativePath);
};
}

Its pretty straight forward method, we are storing our data in managers and then we are calling it from our HTML file, which you can find.

Hope, you enjoyed our article on how to develop a simple Search filter in AngularJS. Subscribe us for more exciting updates.

Output: 

Simple Search Filter in AngularJS

 

Results of Simple Search Filter in AngularJS

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: