Tailwind 2 + Vanilla JS: dropdown search results component (with functional search)

index.html

<!-- Make sure to include the script.js of course ... -->
<!-- Also, adjust "school" and "school-text" fields as required, both here and in script.js ... -->

<label class="block relative">
    <span class="text-gray-700">Select school</span>
    <input id="school" type="hidden" required class="hidden" />
    <input id="school-text" required type="text" class="mt-1 block w-full" placeholder="Select school" />
    <div id="search-results" class="absolute hidden border border-2 max-h-60 mt-3 overflow-scroll bg-white p-3 w-full">
      <div id="no-results-txt" class="hidden">No results</div>
      <ul id="search-list" class="h-100">
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="1">School example 1</li>
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="2">School example 2 yada</li>
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="3">School example 3 searchme</li>
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="4">School example 4 yo</li>
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="5">School example 5 watewa</li>
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="6">School example 6 z</li>
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="7">School example 7 y</li>
          <li class="py-4 cursor-pointer text-gray-500 hover:text-black" data-value="8">School example 8 x</li>
      </ul>
    </div>
</label>

script.js

document.addEventListener("DOMContentLoaded", function() {
  const schoolField = document.querySelector('#school');
  const schoolFieldText = document.querySelector('#school-text');
  
  const searchResults = document.querySelector('#search-results');
  const noResults = document.querySelector('#no-results-txt');
  
  /**
   * Manage school search-dropdown
   */
  let searchResultItems = document.querySelector('#search-list').getElementsByTagName('li');

  const debouncedSearch = debounced(100, function(ev) {
    let text = ev.target.value;

    toggleSearchResults(true)

    let count = 0;

    let pat = new RegExp(text, 'i');
    for (let i=0; i < searchResultItems.length; i++) {
      var item = searchResultItems[i];
      if (pat.test(item.innerText)) {
        item.classList.remove("hidden");
        count++;
      }
      else {
        item.classList.add("hidden");
      }
    }

    if (count > 0) {
      noResults.classList.add('hidden');
    } else {
      noResults.classList.remove('hidden');
    }
  });

  schoolFieldText.addEventListener('focusin', function() {
    toggleSearchResults(true);
  }); 
  schoolFieldText.addEventListener('focusout', focusOut); 
  schoolFieldText.addEventListener('keyup', debouncedSearch); 

  function focusOut() {
    clearTimeout(focusOutTimeout);
    focusOutTimeout = setTimeout(function() {
      toggleSearchResults(false);
    }, 100);
  }

  for(const element of searchResultItems) {
    element.addEventListener('click', function(event) {
      const school_id = event.target.getAttribute('data-value');
      const school_name = event.target.innerHTML;
      setSchool(school_id, school_name);
    });
  }

  function setSchool(id, name) {
    schoolField.value = id;
    schoolFieldText.value = name;
  }

  function toggleSearchResults(bool = true) {
    if (bool) {
      searchResults.classList.remove('hidden');
    } else {
      searchResults.classList.add('hidden');
    }
  }
}

miss ) at the end