JSFiddle - React, Tailwind, and code Playground

by John Semblante

HTML

<div class="input__select-wrapper">
  <div id="dropdownInput" class="input__select-dropdown">
    <input type="text" placeholder="Does not have to be where you live" id="inputDropdown" onkeyup="keyupFunction()">
    <div class="list_result">
      <span>Nowheresville, XX 00000</span>
      <span>Somewheresville, XX 48678</span>
      <span>Everywheresville, XX 22222</span>
    </div>
  </div>
</div>

<script>
  function keyupFunction() {
    var input, filter, valueinput, div, i;
    input = document.getElementById("inputDropdown");
    filter = input.value.toUpperCase();
    valueinput = input.value;
    div = document.getElementById("dropdownInput");
    span = div.getElementsByTagName("span");

    for (i = 0; i < span.length; i++) {
      txtValue = span[i].textContent || span[i].innerText;
      if (valueinput.length == 0) {
        span[i].style.display = "none";
      } else if (txtValue.toUpperCase().indexOf(filter) > -1) {
        span[i].style.display = "block";
      } else {
        span[i].style.display = "none";
      }
    }
  }
</script>

CSS

.list_result span{display: none;}