How do you use a search bar and Javascript to filter out entire HTML divs?

Question

I'm currently attempting to create a search bar with a filter for my website. This particular page has several different divs, each one containing several bits of information. It's probably easier to explain with images and code.

Each of these sections is a self-contained div.

Here's the code for one of them. They're virtually all the same structure, with the only differences being the text and the background images.

<div class="block oblivion-one">
    <h1>The Elder Scrolls IV: Oblivion</h1>
    <h2>Let's Play Oblivion</h2>
    <p class="description">Veriax plays the former Imperial Legionnaire named Sir Veriax who evolves from a discharged soldier to become Tamriel's best hope for surviving the Oblivion Crisis.</p>
        <button class="link-to-playlist">
            <li>
                <a href="https://www.youtube.com/playlist?list=PLEE87B4A5E81D25D5">Playlist (Part One)</a>
            </li>
        </button>
        <button class="link-to-playlist">
            <li>
                <a href="https://www.youtube.com/playlist?list=PL24D7B506DCE8A29F">Playlist (Part Two)</a>
            </li>
        </button>
</div>

I've created a searchbar for this page, and basically I want to allow the user to search for individual series. For example, if they typed in: "The Elder Scrolls IV: Oblivion", only the top row would show up. Everything else would be hidden.

I've been researching this question and it seems like it's easy to filter out elements of a simple text list. This is a bit more complicated because I'm attempting to filter out an entire div of code.

I am admittedly new at Javascript and most of the code below was gathered from a Google search and adapted to my own code, but I wanted to at least present something.

function filterLP() {
    let input = document.getElementById('searchbar').value;
    input = input.toLowerCase();
    let x = document.getElementsByClassName('ul');
    for (i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].getElementsByClassName.display="none";
        }
        else {
            x[i].getElementsByClassName.display="list-item";
        }
    }
}

Obviously that code doesn't work, so I'm open to any suggestions on how to make it filter out the sections correctly. Thank you!

I've tried researching how to do this on my own, and while I've figured out how to do it with a text list I'm struggling to make the function above hide the entire div of code.

Answer 1

<div class="block oblivion-one container">
    <h1>The Elder Scrolls IV: Oblivion</h1>
    <h2>Let's Play Oblivion</h2>
    <p class="description">Veriax plays the former Imperial Legionnaire named Sir Veriax who evolves from a discharged soldier to become Tamriel's best hope for surviving the Oblivion Crisis.</p>
        <button class="link-to-playlist">
            <li>
                <a href="https://www.youtube.com/playlist?list=PLEE87B4A5E81D25D5">Playlist (Part One)</a>
            </li>
        </button>
        <button class="link-to-playlist">
            <li>
                <a href="https://www.youtube.com/playlist?list=PL24D7B506DCE8A29F">Playlist (Part Two)</a>
            </li>
        </button>
</div>

there is no ul and you should find the containers div.

function filterLP() {
        let input = document.getElementById('searchbar').value;
        input = input.toLowerCase();
        let x = document.querySelectorAll('.container');
        x.forEach((item) => {
              if(item.querySelector('h1').innerHTML.toLocaleLowerCase().includes(input)) {
                item.classList.add('hidden');
              } else {
                item.classList.remove('hidden');
              }
        })
    }

and then in css:

.hidden {
     display: none;
}

BTW, you can add this event to your searchbar input. onkeyup="filterLP(event)" , then in the function you can get the event and use the value event.target.value.toLowerCase() so you don't need document.getElementById('searchbar').value line.

function filterLP(evt) {
  let input = evt.target.value.toLowerCase();
  let x = document.querySelectorAll(".container");
  x.forEach((item) => {
    if (!item
      .querySelector("h1")
      .innerHTML.toLocaleLowerCase()
      .includes(input)
    ) {
      item.classList.add("hidden");
    } else {
      item.classList.remove("hidden");
    }
  });
}

.hidden {
  display: none;
}

<input type="text" name="" id="" onkeyup="filterLP(event)" />
<div class="block oblivion-one container">
  <h1>XI</h1>
  <h2>Let's Play Oblivion</h2>
</div>
<div class="block oblivion-one container">
  <h1>VI</h1>
  <h2>Let's Play Oblivion</h2>
</div>
<div class="block oblivion-one container">
  <h1>X</h1>
  <h2>Let's Play Oblivion</h2>
</div>