Files
notifications-admin/app/assets/javascripts/liveSearch.js
Beverly Nguyen fa158cd762 - Clears any selected checkboxes to prevent form submission issues
- Fix search functionality to respect .template-list-item-hidden-by-default
- Add missing "No templates found" message to template search
- Ensure nested template items remain hidden when searching and clearing search
- Hides all template items when clicking "New template" button
- Shows everything again when exiting the "new template" state
2025-06-09 16:35:01 -07:00

99 lines
2.2 KiB
JavaScript

(function(Modules) {
"use strict";
let state;
let normalize = (string) => string.toLowerCase().replace(/ /g,'');
let resultsSummary = (num) => {
if (num === 0) {
return "no results";
} else {
return num + (num === 1 ? " result" : " results");
}
};
let filter = ($searchBox, $searchLabel, $liveRegion, $targets) => () => {
let query = normalize($searchBox.val());
let results = 0;
let $noResultsMessage = $('.js-live-search-no-results');
$targets.each(function() {
let content = $('.live-search-relevant', this).text() || $(this).text();
if ($(this).has(':checked').length) {
$(this).show();
results++;
return;
}
if (query == '') {
$(this).removeClass('js-hidden');
results++;
return;
}
let isMatch = normalize(content).includes(normalize(query));
if (isMatch) {
$(this).removeClass('js-hidden');
results++;
} else {
$(this).addClass('js-hidden');
}
});
if (query !== '' && results === 0) {
$noResultsMessage.removeClass('js-hidden');
} else {
$noResultsMessage.addClass('js-hidden');
}
if (state === 'loaded') {
if (query !== '') {
$searchBox.attr('aria-label', $searchLabel.text().trim() + ', ' + resultsSummary(results));
}
state = 'active';
} else {
$searchBox.removeAttr('aria-label');
$liveRegion.text(resultsSummary(results));
}
// make sticky JS recalculate its cache of the element's position
// because live search can change the height document
if ('stickAtBottomWhenScrolling' in GOVUK) {
GOVUK.stickAtBottomWhenScrolling.recalculate();
}
};
Modules.LiveSearch = function() {
this.start = function(component) {
let $component = $(component);
let $searchBox = $('input', $component);
let $searchLabel = $('label', $component);
let $liveRegion = $('.live-search__status', $component);
let filterFunc = filter(
$searchBox,
$searchLabel,
$liveRegion,
$($component.data('targets'))
);
state = 'loaded';
$searchBox.on('keyup input', filterFunc);
filterFunc();
};
};
})(window.GOVUK.Modules);