Highlight search result using Angular filter
- remove_red_eye46501 Views
- event2 Dec 2014
- access_time5 min read
Highlighting search result improves the user experience and makes the search process less time consuming compare to showing the search result only.
We are very familiar with this feature, it is available in almost every browser, rich text editors and document processor like Google docs.
In this tutorial i am going to explain you how to develop the highlight feature using AngularJs filter module.
Our approach to develop this system is straightforward. Filter module allows use to provide live search for the given data bind with $scope.
We will extend filter module to determine the way to extract the matched search phrases and then simply replace those matched phrases with span tag colored as green or something.
To extract search phrases from $scope data i used simple regular expression.
new RegExp('('+phrase+')', 'gi')
Code:
We are using simple HTML tags and filter module of angular to perform search. HTML code are placed in index.html and Angular code is in app.js.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-app="Demo">
<h1>Highlight text using AngularJS.</h1>
<div class="container" ng-controller="Demo">
<input type="text" placeholder="Search" ng-model="search.text">
<ul>
<!-- filter code -->
<div ng-repeat="item in data | filter:search.text"
ng-bind-html="item.text | highlight:search.text">
</div>
</ul>
</div>
</body>
</html>
<html>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-app="Demo">
<h1>Highlight text using AngularJS.</h1>
<div class="container" ng-controller="Demo">
<input type="text" placeholder="Search" ng-model="search.text">
<ul>
<!-- filter code -->
<div ng-repeat="item in data | filter:search.text"
ng-bind-html="item.text | highlight:search.text">
</div>
</ul>
</div>
</body>
</html>
Here is our Angular code to highlight filter result.
app.js
angular.module('Demo', [])
.controller('Demo', function($scope) {
$scope.data = [
{ text: "<< ==== Put text to Search ===== >>" }
]
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
})
.controller('Demo', function($scope) {
$scope.data = [
{ text: "<< ==== Put text to Search ===== >>" }
]
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
})
Explanation:
Observe code shown below. I am performing filter operation by binding textbox to it. So when you type anything in textbox, data present in $scope.data will be filter accordingly.
<div ng-repeat="item in data | filter:search.text"
ng-bind-html="item.text | highlight:search.text">
</div>
ng-bind-html="item.text | highlight:search.text">
</div>
In angular code i extended filter module which returns the matched Search and if the input present in filter keyword is similar to the one filter found we will replace it with SPAN which in turn hold the matched search data placed in $1.
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
'<span class="highlighted">$1</span>')
Enhancement:
We can proceed with performing search on dynamic data and highlighting the found key. To do that you can use any backend technology like Node.js, PHP to perform database operation and bind the data in $scope variable.
Our code will work with whatever content present in $scope.data. You can either put static content on it or dynamic content depend upon your application.
You can use this code in web application such as text processor ( Like Google docs ) or any sort of search where your main goal is to help user find information quickly.
Further reading:
There is one rich library on angular called UI.UTILS which contains many GUI interaction code. Have a look on this.
External link : UI.UTILS home page.
Conclusion:
Highlighting a text so that user can quickly find it is really very powerful approach to improve interaction with your application. This small piece of code may help you to achieve or at least gives you a kick start !
