notifications-admin/app/assets/javascripts/liveSearch.js

(function(window) {
  "use strict";

  var Modules = window.NotifyModules;
  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.value);
    let results = 0;
    let noResultsMessage = document.querySelector('.js-live-search-no-results');

    targets.forEach(function(target) {

      let relevantElement = target.querySelector('.live-search-relevant');
      let content = relevantElement ? relevantElement.textContent : target.textContent;

      if (target.querySelector(':checked')) {
        target.classList.remove('js-hidden');
        results++;
        return;
      }

      if (query == '') {
        target.classList.remove('js-hidden');
        results++;
        return;
      }

      let isMatch = normalize(content).includes(normalize(query));

      if (isMatch) {
        target.classList.remove('js-hidden');
        results++;
      } else {
        target.classList.add('js-hidden');
      }
    });

    if (noResultsMessage) {
      if (query !== '' && results === 0) {
        noResultsMessage.classList.remove('js-hidden');
      } else {
        noResultsMessage.classList.add('js-hidden');
      }
    }

    if (state === 'loaded') {
      if (query !== '') {
        searchBox.setAttribute('aria-label', searchLabel.textContent.trim() + ', ' + resultsSummary(results));
      }
      state = 'active';
    } else {
      searchBox.removeAttribute('aria-label');
      liveRegion.textContent = resultsSummary(results);
    }


  };


  Modules['live-search'] = function() {

    this.start = function(component) {

      let searchBox = component.querySelector('input');
      let searchLabel = component.querySelector('label');
      let liveRegion = component.querySelector('.live-search__status');

      let targetsSelector = component.dataset.targets;
      let targets = Array.from(document.querySelectorAll(targetsSelector));

      let filterFunc = filter(
        searchBox,
        searchLabel,
        liveRegion,
        targets
      );

      state = 'loaded';

      searchBox.addEventListener('keyup', filterFunc);
      searchBox.addEventListener('input', filterFunc);

      filterFunc();

    };

  };

})(window);