[KEYCLOAK-10018] Adding search highlight with text match
This commit is contained in:
parent
ed4af9baba
commit
b32a9debce
3 changed files with 19 additions and 3 deletions
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue