rowt/frontend/main.ts

import './scss/app.scss'

document.addEventListener('DOMContentLoaded', function() {
  console.log("init");
  initSearch();
});

 function initSearch() {
  const input = <HTMLInputElement>document.querySelector('#filter-js');

  if(input) {
    input.addEventListener('input', () => {
      filterElements(input.value);
    });
  }
}

function filterElements(input: string) {
  const elements = document.querySelectorAll('form[data-filterable="true"]');

  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 show all elements
    element.style.display = 'flex';

    // hide if case doesn't match
    if(!filterString?.includes(input.toLocaleLowerCase())) {
      element.style.display = 'none';
    }
  });
}