mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-01 06:30:56 -04:00
d7e6e6ae90
At the moment live search works by either setting something to hidden or displayed. When the search term is empty, it sets everything to visible. This doesn’t work with folders because some of them should be hidden by default (the ones not at the current level). We can account for this special case (empty search term) by removing the `display` CSS attribute when the search term is empty. This means that each item’s visibility will be controlled by whatever is set in the CSS file. Using jQuery Setting a property to `''` removes it.
50 lines
837 B
JavaScript
50 lines
837 B
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
let normalize = (string) => string.toLowerCase().replace(/ /g,'');
|
|
|
|
let filter = ($searchBox, $targets) => () => {
|
|
|
|
let query = normalize($searchBox.val());
|
|
|
|
$targets.each(function() {
|
|
|
|
let content = $(this).text();
|
|
|
|
if (query == '') {
|
|
$(this).css('display', '');
|
|
return;
|
|
}
|
|
|
|
$(this).toggle(
|
|
normalize(content).indexOf(normalize(query)) > -1
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
Modules.LiveSearch = function() {
|
|
|
|
this.start = function(component) {
|
|
|
|
let $component = $(component);
|
|
|
|
let $searchBox = $('input', $component);
|
|
|
|
let filterFunc = filter(
|
|
$searchBox,
|
|
$($component.data('targets'))
|
|
);
|
|
|
|
$searchBox.on('keyup input', filterFunc);
|
|
|
|
filterFunc();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|