Surligner des résultats (highlight) dans une recherche

**Daviloppeur** · 20/10/2014, 16h36

Bonjour,

Je dispose d'un input faisant une recherche sur un titre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Titre: <input ng-model="rechercheTitre">

Ceci fait je liste les résultats d'un flux JSON et filtre en fonction du titre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<li ng-repeat="resultats in resultatsJSON.results | filter:rechercheTitre">
{{resultats.tra_title}}

La recherche marche bien mais j'aimerais que le texte recherché dans le input soit surligné dans le résultat.
Ui-Utils semble faire cela mais utilise ng-bind-html-unsafe qui n'est plus utilisé et de plus je n'arrive pas à le faire fonctionner. De
Qui plus est, je pense qu'il existe une solution plus simple pour faire ce que je veux.

Merci de votre aide

**Daviloppeur** · 20/10/2014, 20h17

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

Voici le code utilisé par l'exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Surligner des résultats (highlight) dans une recherche

AngularJS

Vue hybride

Discussions similaires

Partager

Partager