如何使用搜索栏和 Javascript 过滤掉整个 HTML div？

Question

我目前正在尝试为我的网站创建一个带有过滤器的搜索栏。这个特定的页面有几个不同的 div，每个 div 包含几位信息。用图片和代码可能更容易解释。

这是其中一个的代码。它们几乎都是相同的结构，唯一的区别是文本和背景图像。

<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>

我为此页面创建了一个搜索栏，基本上我想让用户搜索单个系列。例如，如果他们输入：“The Elder Scrolls IV: Oblivion”，只会显示第一行。其他一切都会被隐藏。

我一直在研究这个问题，似乎很容易过滤掉简单文本列表的元素。这有点复杂，因为我试图过滤掉整个代码块。

诚然，我是 Javascript 的新手，下面的大部分代码都是从谷歌搜索中收集的，并适应了我自己的代码，但我想至少展示一些东西。

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";
        }
    }
}

显然该代码不起作用，因此我愿意接受有关如何使其正确过滤掉部分的任何建议。谢谢！

我已经尝试自己研究如何做到这一点，虽然我已经想出如何用文本列表来做到这一点，但我正在努力让上面的函数隐藏整个代码块。