finder.html

<article class="finder">
  <div class="menu-search">
    <input id="finder-input" type="search" autocomplete="off" placeholder="Search 129 CSS properties" autofocus>
    <i class="icon is-search"></i>
  </div>
  <div id="finder-list" class="finder-list">
    {% include lists/finder-list.html %}
  </div>
</article>

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {

  var $searchInput = document.getElementById('finder-input');
  var $finderList = document.getElementById('finder-list');
  var $finderItems = document.querySelectorAll('.finder-item');
  var isFocused = false;
  var isSearching = false;
  var isModaling = false;
  var currentMatch = -1;
  var matches = initializeMatches($finderItems);

  if ($searchInput) {
    $searchInput.addEventListener('focus', function(event) {
      isFocused = true;
      isSearching = true;
    });

    $searchInput.addEventListener('blur', function(event) {
      isFocused = false;
      if (this.value === '') {
        globalReset();
      }
    });

    $searchInput.addEventListener('keyup', function(event) {
      var query = this.value.toLowerCase();
      isFocused = (this === document.activeElement);

      if (isFocused) {
        isSearching = true;

        if (query.length > 0) {
          matches = [];
          currentMatch = -1;
          $finderList.classList.add('is-searching');
          Array.prototype.forEach.call($finderItems, function($el, index) {
            var propertyName = $el.dataset.propertyName;
            var isMatch = highlightQuery($el, propertyName, query);

            if (isMatch && !$el.classList.contains('is-hidden')) {
              matches.push({
                DOMIndex: index,
                propertyName: propertyName,
              });
            }
          });
        } else {
          $finderList.classList.remove('is-searching');
          Array.prototype.forEach.call($finderItems, function($el) {
            var $elName = $el.querySelector('.item-name');
            $elName.innerHTML = $el.dataset.propertyName;
          });
        }
      }
    });

    window.addEventListener('click', function(event) {
      if (!isFocused) {
        isSearching = false;
        cleanMenu($finderItems, false, true);
      }
    });

    window.addEventListener('keydown', function(event) {
      var key = event.code || event.key || false;

      switch (key) {
      case 'Enter':
        if (isSearching && currentMatch > -1) {
          event.preventDefault();
          var propertyName = matches[currentMatch].propertyName;
          var $target = document.getElementById(propertyName);

          if ($target) {
            $target.scrollIntoView();
          } else {
            window.location = window.location.origin + '/property/' + propertyName;
          }
        }
        break;
      case 'Escape':
        if (isModaling) {
          closeModal();
        } else {
          isSearching = false;
          globalReset();
        }
        break;
      case 'ArrowUp':
      case 'ArrowDown':
        if (isSearching) {
          event.preventDefault();
          if (isFocused) {
            $searchInput.blur();
          }
          var increment = (key === 'ArrowDown');
          currentMatch = navigateMenu($finderItems, matches, currentMatch, increment);

          if (currentMatch === -1) {
            $searchInput.focus();
          }
          break;
        }
      }
    });

    function globalReset() {
      isFocused = false;
      $searchInput.value = '';
      $searchInput.blur();
      currentMatch = -1;
      matches = initializeMatches($finderItems);
      $finderList.classList.remove('is-searching');
      cleanMenu($finderItems, true, true);
    }

  }

});

</script>