How to Highlight Search Results in AngularJS – ShareSoft Technology 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

 
<script src=" angular.min.js" type="text/javascript"></script>  

2.Put below html structure on your html page

 
<div  data-ng-app="SampleApp" data-ngcontroller="SampleCntrl"> 
  <div> 
       <searchsection data="searchdata"></searchsection> 
    </div> 
</div> 

3.Write custom style for class .highlighted

 
<style> 
.highlighted { font-weight:bold; color:#3399cc; font-size:16px;  } 
</style> 
 

4.Paste the following script code on your page

 
<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> 
 

Sample Output :-

Here is the brief explanation for the above coding:-

Custom Directive – performs the functionality of template’s “html” structure.

 
Here, “<searchsection”> </searchsection> is the custom directive.   

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

 
         app.directive('searchsection', function(){} // Here Set  directive name  
 

Sample Data:-

 
       <searchsection data="searchdata"></searchsection> 

Here, “searchdata” is the list of sample data’s for the search function. 
  

Template:-

It contains html structure with output of the directive function.

How to set the template in directive using angular js

 
   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) 
    } 
 

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.