Format filtered results in AngularJS

Format filtered results in AngularJS
0

#1

I’ve an input box which is used to filter out the results among the overall results displayed. I’ve a filter ‘startWith’ for that. Now, I need to highlight the search text among the search results displayed in angularJS.

For e.g., when I type ‘o’ in the search box, it should highlight ‘O’ of the Orange displayed.

Could you please help me achieve this?

Here’s my code:

Plnkr


#2

Not sure. I don’t know much about dependency injection or how to do it.
Perhaps you could explain how it is supposed to work?


#3

Hey. You can use the ng-bind-html directive instead of the interpolation in your ng-repeat and then a filter for your ng-model that will wrap the letters of the words in a span as they are typed:

HTML

<p ng-repeat="obj in myData | filter:search:startWith" ng-bind-html="obj.name | highlightMatch:search.name">

JS

app.filter('highlightMatch', function($sce) {
    return function(words, search) {
      return $sce.trustAsHtml(search ? words.replace(new RegExp(`(${search})`, 'i'), '<span class="match">$1</span>') : words);
    }
});

Then you can style the “match” class as you wish:

.match {
  background-color:rgba(0, 128, 128, .5);
}

See an example here.