import './scss/app.scss' document.addEventListener('DOMContentLoaded', function() { console.log("init"); initSearch(); }); function initSearch() { const input = document.querySelector('#filter-js'); if(input) { filterElements(input.value); input.addEventListener('input', () => { filterElements(input.value); }); } } function filterElements(input: string) { const elements = document.querySelectorAll('form[data-filterable="true"]'); let resultWrapper = document.querySelector('#filter-result-js'), amountShownElements = 0; Array.prototype.forEach.call(elements, (element: HTMLElement) => { // set both strings (input & dataset filter) to lowercase to not be case sensitive let filterString = element.dataset.filter?.toLocaleLowerCase(); // bulk hide all elements element.style.display = 'none'; // show if input matches if(filterString?.includes(input.toLocaleLowerCase())) { element.style.display = 'flex'; amountShownElements ++; } }); if(resultWrapper) { resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '' + amountShownElements + '' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden'); } }