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=
"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
Build An Online Pharmacy Store Using Angular17
Building an online pharmacy store using Angular 17 involves creating a web application where users can browse, search, and purchase pharmaceutical products. The application will include features such as product listing, a shopping cart, and order management.Project PreviewBuild an Online Pharmacy St
15+ min read
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
Angular PrimeNG FilterService Built-in Constraints
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.
6 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
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
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 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
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