Javascript поисковая функция

Question

У меня тут проблема. Поиск работает почти. Но когда я удаляю что-то, оно больше не появляется. (пробовал что-то вроде else {names[i].parentElement.style.display = "block"}). Это не сработало. И, может быть, кто-то может сказать мне, что делать, если кто-то нажимает на Enter и все сбрасывается. Спасибо за каждый ответ.

function searchFunction() {
  const search = document.getElementById("myinput").value;
  const names = document.getElementsByClassName("names");
  console.log(search)
  for (var i = 0; i < names.length; i++) {
    if (names[i].innerHTML.toUpperCase().includes(search.toUpperCase()) == false) {
      names[i].parentElement.style.display = "none"
    }
  }

}

<form class="search">
    <input class="bar" type="search" name="search" placeholder="Nach Mitarbeiter suchen" autocomplete="off" id="myinput" oninput="searchFunction()"> echo "
    <div class='gridRow'>
        <p class='rowElements names'>" . $user . "</p>

        <p class='rowElements beer'>" . $beer . "</p>

        <p class='invisibleBullshit'>" . $email . "</p>

        <input type='number' min='0' class='rowElements inputSize' placeholder='0' name='beerSub-"
                    . $user ."'>

        <button class='rowElements btn btn-primary btn-sm inputSize' onclick='payBeer(".' "'.$user.'" '.",".' "'.$email.'" '.")'>
            Bezahlen
        </button>
    </div>
</form>

Answer 1

Самый простой способ - переключаться между block и none в зависимости от того, найден ли поисковый термин в указанном элементе.

Начните вводить «bob» или «john» в приведенном ниже примере, чтобы увидеть эффект.

function searchFunction() {
  const search = document.getElementById("myinput").value;
  const names = document.getElementsByClassName("names");
  //console.log(search)
  for (var i = 0; i < names.length; i++) {
     names[i].parentElement.style.display =  
        (names[i].innerHTML.toUpperCase().includes(search.toUpperCase()) 
            ? "block"
            : "none");
  }

}

<form class="search">
     <input class="bar" type="search" name="search" placeholder="Nach Mitarbeiter suchen"autocomplete="off" id="myinput" oninput="searchFunction()">
     <div class='gridRow'>
         <p class='rowElements names'>Bob</p>
         <p class='rowElements beer'>Beer1</p>
         <p class='invisibleBullshit'>bob@bob.com</p>
         <input type='number' min='0' class='rowElements inputSize' placeholder='0' name='beerSub-bob'>
         <button class='rowElements btn btn-primary btn-sm inputSize' onclick='payBeer("bob","bob@bob.com")'>
             Bezahlen
          </button>
     </div>
     <div class='gridRow'>
         <p class='rowElements names'>John</p>
         <p class='rowElements beer'>Beer2</p>
         <p class='invisibleBullshit'>john@john.com</p>
         <input type='number' min='0' class='rowElements inputSize' placeholder='0' name='beerSub-john'>
         <button class='rowElements btn btn-primary btn-sm inputSize' onclick='payBeer("john","john@john.com")'>
             Bezahlen
          </button>
     </div>
</form>