Building a Search Functionality using AngularJS Services
Last Updated :
24 Apr, 2025
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of any value, function, or feature that an application needs. A service is a class with a narrow and well-defined purpose.
In this article, we’ll see how to build a search functionality using the AngularJS services. The search functionality is a critical component of any application that deals with large amounts of data. Angular provides a way to create a custom service that encapsulates the search logic and can be injected into different components of the application allowing the users to search for data based on a keyword. This approach helps in creating a more modular and maintainable codebase.
Syntax:
var search = function(keyword) {
return data.filter(function(item) {
return item.name.toLowerCase()
.indexOf(keyword.toLowerCase()) !== -1;
});
};Steps to create a search functionality: The below procedure will be implemented to create the search functionality:
Step 1: Create an AngularJS module: First, we create a module with the help of angular.module() function and give it a name like “myApp”:
angular.module('myApp', []);Step 2: Create an AngularJS factory to encapsulate the search functionality
A factory function is a way to define a reusable object that can be injected into other parts of the application. In this example, we’ll use a factory to define a search function that takes a search keyword and returns an array of matching results. Here’s an example of a search factory:
angular.module('myApp')
.factory('searchFactory', function() {
var data = [
{ id: 1, name: 'Stack' },
{ id: 2, name: 'Queue'},
...
];
var search = function(keyword) {
return data.filter(function(item) {
return item.name.toLowerCase()
.indexOf(keyword.toLowerCase()) !== -1;
});
};
return {
search: search
};
});Step 3: Create an AngularJS controller to handle the search functionality
A controller function is a way to define the behavior of a view in AngularJS. In this example, we’ll use a controller to get the search keyword from the view, call the search function from the factory, and display the search results in the view. Here’s an example of a search controller:
angular.module('myApp')
.controller('searchCtrl', function($scope, searchFactory) {
$scope.searchKeyword = '';
$scope.searchResults = [];
$scope.search = function() {
$scope.searchResults = searchFactory
.search($scope.searchKeyword);
};
});Step 4: Add an ng-controller attribute to the body element, and set it to the name of the controller:
<body ng-controller="searchCtrl">
Step 5: Add an input element and a button element for the search functionality:
<input type="text"
ng-model="searchKeyword"
placeholder="Search...">
<button ng-click="search()">
Search
</button>Step 6: Add an element to display the search results using the ng-repeat directive to iterate over the searchResults array in the controller:
<div ng-repeat="result in searchResults">
{{ result.name }}
</div>The below example demonstrates how to build a search functionality using AngularJS.
Example 1: In this example, we have used the factory function where the data is also loaded using the service and the controller uses the service to search for data and displays the search results using the $scope object.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Search Example</title>
<script src=
</script>
<script>
angular.module('myApp', [])
.service('searchService', function () {
var searchData = [];
var data = [{
id: 1,
name: 'Array'
},
{
id: 2,
name: 'Linked List'
},
{
id: 3,
name: 'Stack'
},
{
id: 3,
name: 'Queue'
}
];
this.search = function (keyword) {
searchData = data.filter(function (item) {
return item.name.toLowerCase().
indexOf(keyword.toLowerCase()) !== -1;
});
return searchData;
};
})
.controller('searchCtrl', function (searchService) {
var vm = this;
vm.searchKeyword = '';
vm.searchResults = [];
vm.search = function () {
vm.searchResults =
searchService.search(vm.searchKeyword);
};
});
</script>
</head>
<body ng-controller="searchCtrl as search">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Building a search functionality
using AngularJS services
</h3>
<h3>Search Data Structures</h3>
<div>
<input type="text"
ng-model="search.searchKeyword"
placeholder="Search...">
<button ng-click="search.search()">
Search
</button>
</div>
<div ng-if="search.searchResults.length > 0">
<ul>
<li ng-repeat="result in search.searchResults">
{{ result.name }}
</li>
</ul>
</div>
<div ng-if="search.searchResults.length === 0">
<p>No results!</p>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we have used the factory function however the data has been hard-coded in the controller and the controller uses the service to search for data and displays the search results using the $scope object.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Search Example</title>
<script src=
</script>
<script>
angular.module('myApp', [])
.factory('searchData', function () {
var data = [{
id: 1,
name: 'Array'
},
{
id: 2,
name: 'Linked List'
},
{
id: 3,
name: 'Stack'
},
{
id: 3,
name: 'Queue'
}
];
var search = function (keyword) {
return data.filter(function (item) {
return item.name.toLowerCase().
indexOf(keyword.toLowerCase()) !== -1;
});
};
return {
search: search
};
})
.controller('searchCtrl', function ($scope, searchData) {
$scope.searchKeyword = '';
$scope.searchResults = [];
$scope.search = function () {
$scope.searchResults =
searchData.search($scope.searchKeyword);
};
});
</script>
</head>
<body ng-controller="searchCtrl">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Building a search functionality
using AngularJS services
</h3>
<h3>Search Data Structures</h3>
<div>
<input type="text"
ng-model="searchKeyword"
placeholder="Search...">
<button ng-click="search()">
Search
</button>
</div>
<div ng-if="searchResults.length > 0">
<ul>
<li ng-repeat="result in searchResults">
{{ result.name }}
</li>
</ul>
</div>
<div ng-if="searchResults.length === 0">
<p>No results!</p>
</div>
</body>
</html>
|
Output:
Similar Reads
Angular 7 | Angular Data Services using Observable
Observables Observable manage async data and a few other useful patterns. Observables are similar to Promises but with a few key differences. Unlike Promises, Observables emit multiple values over time. In real scenarios, web socket or real-time based data or event handlers can emit multiple values
4 min read
AngularJS $exceptionHandler Service
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $exceptionHand
4 min read
How to use a Custom Service Inside a Filter in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of an
4 min read
AngularJS $location Service
The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
How to implement 'add tag' functionality in an Angular 9 app ?
Angular makes it very easy to implement almost every functionality. In this article, we will learn how to implement add tag functionality in your angular app. Adding tags have applications in several areas like music apps, online shopping apps, etc. By using this functionality we can filter the resu
3 min read
Creating an injectable service in Angular
In Angular, services are a great way to share data, functionality, and state across different components in your application. Services are typically injected into components and other services as dependencies, making them easily accessible and maintainable. Mostly services are used to create functio
3 min read
How to call an AngularJS Function inside HTML ?
A Function is a set of statements that takes input, does some specific computation, and produces output. In this article, we will learn How to Call an AngularJS function inside HTML. To achieve this, we can use {{...}} to call the function from HTML. We can also pass arguments and return the result
3 min read
How to Communicate with Backend Services using HTTP in Angular?
To communicate with backend services using HTTP in Angular, you typically use the HttpClient module, which is part of the @angular/common/http package. This module allows you to interact with RESTful APIs, fetch data, submit forms, perform CRUD operations, and more. PrerequisitesMongoDBExpressJSAngu
7 min read
Remove duplicate elements from an array using AngularJS
We have given an array and the task is to remove/delete the duplicates from the array using AngularJS. Approach: The approach is to use the filter() method and inside the method, the elements that don't repeat themselves will be returned and the duplicates will be returned only once.Hence, a unique
2 min read
What is the Difference Between factory and service in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we will explore the differences between t
4 min read