TechQA.

How to make my searchbar work, vanilla javascript and html

56 views Asked by At

So I'm making a search bar for a specific part of my website which has a list of columns. On input it's supposed to make all of them invisible except ones that have those letters in the name basically.

Here's what I tried, but unsuccessfully. It does print "it works" into console, but doesn't change anything else. I know I probably messed some specific part, but I'm having trouble in figuring which.

Code Snippet

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>

javascript html searchbar
Original Q&A
0

There are 0 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SEARCHBAR

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions