Currently, I have implemented a filter that searches for an object in a text field using the properties of title and name. If there are matches, the words are highlighted in yellow.
I am interested in modifying this so that if there are matches, the other elements of my object will disappear, displaying only the object with the matches.
https://i.sstatic.net/je8NS.png
This is the code snippet:
https://plnkr.co/edit/Lb56FtZxdIyMNluwCSm8?p=preview
$scope.data = [{
text: "<< ==== Put text to Search ===== >>"
}];
$scope.data = [{
title: "Bad",
name: 'bill'
}, {
title: "Good",
name: 'Goe'
}, {
title: "Great",
name: 'Brad'
}, {
title: "Cool",
name: 'yan'
}, {
title: "Excellent",
name: 'mikle'
}, {
title: "Awesome",
name: 'mosa'
}, {
title: "Horrible",
name: 'morteza'
}];
})
.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)
}
<input type="text" placeholder="Search" ng-model="search">
<ul>
<!-- filter code -->
<li ng-repeat="item in data">
<p><span>Title: </span><span ng-bind-html="item.title | highlight:search"></span></p>
<p><span>Name: </span><span ng-bind-html="item.name | highlight:search"></span></p>
</li>
</ul>
Thank you!