如何让我的搜索栏正常工作，原生 javascript 和 html

Question

因此，我正在为我的网站的特定部分创建一个搜索栏，其中包含一个列列表。在输入时，它应该使所有这些字母都看不见，除了名称中基本上包含这些字母的字母之外。

这是我尝试过的方法，但没有成功。它确实将“it Works”打印到控制台中，但不会改变其他任何内容。我知道我可能弄乱了某些特定部分，但我很难弄清楚是哪个部分。

代码片段

function search() {
  let input = document.getElementById('searchbar').value;
  input = input.toLowerCase();
  let x = document.getElementsByClassName('hosting-item');

  for (let i = 0; i < x.length; i++) {
    if (!x[i].innerHTML.toLowerCase().includes(input)) {
      x[i].style.display = "none";
    } else {
      //console.log('it works');
      x[i].style.display = "block";
    }
  }
}

document.getElementById('searchbar').oninput = search;

<section style="height: 100vh;background: #090908;">
  <div class="text-center d-md-flex flex-column flex-fill justify-content-lg-center align-items-lg-center hero-bg">
    <h1 class="hero-title" style="color: white !important;font-weight: 800;font-family: inherit;">AFFORDABLE TOP TIER HOSTING </h1>
    <h1 style="color: white !important;font-weight: 500;font-family: inherit;font-size: 18px;">Whether it&#39;s a game, discord bot or even a website<br />we got it all</h1>
  </div>
  <div class="container d-flex d-md-flex flex-column justify-content-center align-items-center justify-content-md-center align-items-md-center"><input id="searchbar" class="search-input" type="search" style="margin-top: 3rem;border: 1px white solid;background: black;height: 2rem;color: white;border-radius: 3px;padding: 1rem;" placeholder="Find your game..." /></div>
  <div class="container" style="max-width: 1100px;margin-top: 3rem;">
    <div class="row" style="padding: 6px;margin-bottom: 1rem;">
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
    </div>
    <div class="row" style="padding: 6px;margin-bottom: 1rem;">
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
    </div>
    <div class="row" style="padding: 6px;margin-bottom: 1rem;">
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
      <div class="col-md-4 col-lg-4 d-flex d-lg-flex flex-column align-items-end align-items-lg-start hosting-item" style="border: 2px black solid;padding-right: 0.5rem;padding-left: 0.5rem;padding-top: 0.5rem;">
        <div class="d-flex d-lg-flex align-items-end align-items-lg-end hosting-item" style="width: 100%;height: 100%;background-image: url('mc.png');">
          <h1 class="text-center d-flex d-lg-flex hosting-title">MINECRAFT</h1>
        </div>
        <div class="d-flex d-lg-flex justify-content-between" style="width: 100%;padding-top: 4px;">
          <h1 class="d-flex d-lg-flex" style="font-size: 16px;">STARTING AT <span style="color: rgb(78, 239, 113);"> </span><strong><span style="color: rgb(55, 183, 255);">$1.50</span></strong></h1><a class="d-lg-flex justify-content-lg-end order-button" href="#">ORDER NOW</a>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

所有游戏都有相同的名称尝试使用不同的名称，您编写的所有代码都很好