Surligner des résultats (highlight) dans une recherche

J'ai trouvé en m'aidant de ce code : http://embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/index.html

Voici le code utilisé par l'exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.2.5" data-semver="1.2.5" src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
 
    <style>
      .highlighted { background: yellow }
    </style>
  </head>
  <body ng-app="Demo">
    <h1>Hello Plunker!</h1>
 
    <div class="container" ng-controller="Demo">
      <input type="text" placeholder="Search" ng-model="search.title">
 
      <ul>
        <!-- with filter -->
        <li ng-repeat="item in data | filter:search.title"
            ng-bind-html="item.title | highlight:search.title">
        </li>
      </ul>
    </div>
 
    <script>
      angular.module('Demo', [])
        .controller('Demo', function($scope) {
          $scope.data = [
            { title: "Bad" },
            { title: "Good" },
            { title: "Great" },
            { title: "Cool" },
            { title: "Excellent" },
            { title: "Awesome" },
            { title: "Horrible" },
          ]
        })
        .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)
          }
        })
    </script>
  </body>
</html>