[KEYCLOAK-10018] Adding search highlight with text match

This commit is contained in:
Martin Reinhardt 2019-06-07 10:26:39 +02:00 committed by Stan Silvert
parent ed4af9baba
commit b32a9debce
3 changed files with 19 additions and 3 deletions

View file

@ -66,6 +66,16 @@ module.controller('GroupListCtrl', function($scope, $route, $q, realm, Groups, G
"subGroups": sortGroups('name', groups) "subGroups": sortGroups('name', groups)
} }
]; ];
if (angular.isDefined(search) && search !== '') {
// Add highlight for concrete text match
setTimeout(function () {
document.querySelectorAll('span').forEach(function (element) {
if (element.textContent.indexOf(search) != -1) {
angular.element(element).addClass('highlight');
}
});
}, 500);
}
}, function (failed) { }, function (failed) {
Notifications.error(failed); Notifications.error(failed);
}); });

View file

@ -8,7 +8,7 @@
<div class="form-inline"> <div class="form-inline">
<div class="form-group"> <div class="form-group">
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()"> <input type="text" autofocus placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()">
<div class="input-group-addon"> <div class="input-group-addon">
<i class="fa fa-search" id="groupSearch" ng-click="searchGroup()"></i> <i class="fa fa-search" id="groupSearch" ng-click="searchGroup()"></i>
</div> </div>

View file

@ -423,3 +423,9 @@ div[tree-model] li .deactivate_selected {
font-weight: bold; font-weight: bold;
padding: 1px 5px; padding: 1px 5px;
} }
/* search highlighting */
div[tree-model] li .highlight {
background-color: #aaddff;
}