Building a Search Functionality using AngularJS Services
Last Updated :
28 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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</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
Build an Online Gift store in Angular Creating an online gift store using Angular is a great way to showcase your web development skills. Angular provides a robust framework for building dynamic, responsive, and feature-rich web applications. This article will guide you through the process of setting up a basic online gift store using A
15+ 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
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
AngularJS $controller Service AngularJS applications depend on a controller to control the flow of data through an AngularJS application. AngularJS architecture uses the MVC model i.e the Model View Controller. The model is responsible for maintaining the application data, the View for displaying data or some part of data to the
5 min read
Angular PrimeNG FilterService Component Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
7 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
AngularJS Fetch Data From API using HttpClient There is some data in the API and our task here is to fetch data from that API using HTTP and display it. In this article, we will use a case where the API contains employee details which we will fetch. The API is a fake API in which data is stored in the form of a JSON (Key: Value) pair. API stands
4 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