Latest Blog
Highlight Search Results in ng repeat using AngularJS:
Let us see how to highlight the search results in ng repeat using Angular filter. Highlighting the
search result improves user experience and minimizes the search time when compared showing the
search results.
Here is the process that explains how to highlight the strings in ng repeat data:
1.Include angular.js on your header section
[html]
<script src=" angular.min.js" type="text/javascript"></script> [/html]
2.Put below html structure on your html page
[html]
<div data-ng-app="SampleApp" data-ngcontroller="SampleCntrl">
<div>
<searchsection data="searchdata"></searchsection>
</div>
</div>
[/html]
3.Write custom style for class .highlighted
[html]
<style>
.highlighted { font-weight:bold; color:#3399cc; font-size:16px; }
</style>
[/html]
4.Paste the following script code on your page
[html]
<script>
var app = angular.module(‘SampleApp’, []);
app.controller(‘SampleCntrl’, function($scope) {
$scope.searchdata = [ // Sample Data
{
website:’sharesoft.in’,
companyname:’sharesoft’,
search_engine: ‘google’,
traffic: ’50’,
},
{
website:’webcodemonster.com’,
companyname:’webcodemonster’,
search_engine: ‘google’,
traffic: ’40’,
}
];
});
app.directive(‘searchsection’, function(){
return{
scope:{
searchdata: ‘=data’
},
template:’ <input type="text" id="search_result" data-ng-model="search.text"
class="inputText form-control form_control" placeholder="Search" ><ul class="search_visb"><li
data-ng-repeat="mysearch in searchdata | filter:website | filter:search.text"><a
class="sear_img_avis"><span class="S_com_name" data-ng-bind-html="mysearch.website |
highlight1:search.text">{{mysearch.website}}</span><span class="S_name_name"
data-ng-bind-html="mysearch.companyname |
highlight:search.text">{{mysearch.companyname}}</span></a></li></ul>’,
link:function(scope,element,attributes){
}
}
}
).filter(‘highlight’, function($sce) {
return function(cname, phrase) {
if (phrase) cname = cname.replace(new RegExp(‘(‘+phrase+’)’, ‘gi’),
‘<span class="highlighted">$1</span>’)
return $sce.trustAsHtml(cname)
}
}).filter(‘highlight1’, function($sce) {
return function(web, phrase) {
if (phrase) web = web.replace(new RegExp(‘(‘+phrase+’)’, ‘gi’),
‘<span class="highlighted">$1</span>’)
return $sce.trustAsHtml(web)
}
});
</script>
[/html]
Sample Output :-
Here is the brief explanation for the above coding:-
Custom Directive – performs the functionality of template’s “html” structure.
[html]
Here, “<searchsection”> </searchsection> is the custom directive.
[/html]
Let’s see how to declare for performing the function on template’s html structure with sample
data.
How to set the directive name in angular JS
[html]
app.directive(‘searchsection’, function(){} // Here Set directive name
[/html]
Sample Data:-
[html]
<searchsection data="searchdata"></searchsection>
Here, “searchdata” is the list of sample data’s for the search function.
[/html]
Template:-
It contains html structure with output of the directive function.
How to set the template in directive using angular js
[html]
app.directive(‘searchsection’, function(){
return{
scope:{
searchdata: ‘=data’
},
template:’My html ‘, // Set template
}
Filter: – Select a subset of items from an array.
if (phrase) cname = cname.replace(new RegExp(‘(‘+phrase+’)’, ‘gi’),
‘<span class="highlighted">$1</span>’)
return $sce.trustAsHtml(cname)
}
[/html]
Here, we have used “Regular Expression” for finding the string match, if your “typed string” matches
with the array of lists, the filter function just added “hightlight class” will be added to the string.
Depending upon the “hightlighted class” css, the output will be displayed in specified pattern.
Why use AngularJS for highlighting the search result over JQuery? It is that simple, Angular JS is the
emerging technology that allows creating applications very quickly and easily.
Blog
