Javascript 从HTML DOM内容筛选搜索结果

我正在为俱乐部管理设计一个网站，想在其中添加搜索过滤器功能，我如何使用JavaScript实现这一点，以便通过键入俱乐部名称（即“figcaption”标记）过滤搜索结果

俱乐部5
俱乐部6
俱乐部7
俱乐部8

---

您可以尝试类似的方法，创建搜索栏并调用该函数

函数标记搜索（标题）{
让结果=document.queryselectoral（“span”）
结果.forEach（（ele）=>{
if（ele.childNodes[1].childNodes[3].textContent.trim（）==标题）{
ele.style.display=“块”
}否则{
ele.style.display=“无”
}
})
}

俱乐部5
俱乐部6
俱乐部7
俱乐部8

您也在使用jquery吗？是的@AdityaGupta@AdityaGupta为什么jquery总是第一个评论这些问题？您可以完美地进行过滤，而无需使用有效的别名库。OP-你试过什么？如果没有这个，我们无法判断您的处境。因此，我们可以在您键入输入时隐藏不相关的结果，或者根据您键入的内容显示结果。@ggdx很好。自从最新的ES6更新以来，几乎不需要jquery，但是一些用户对旧版本的浏览器和最新的js代码有问题，他们最终添加了像babel这样的Transpiler。它看起来很好，但对框没有影响，我的意思是我应该只拥有我键入其名称的俱乐部，其余的应该隐藏（作为过滤）。啊，你必须使用一些css，等等，让我更新我的答案@Benguman请根据我的想法进行调整太好了，这正是我想要的，但有一个小问题是“刷新页面”，如果我搜索一个俱乐部，那么我必须刷新页面才能进行另一次搜索（过滤）。哇哦，那太棒了，我的朋友！你在这里真的做得很好，你的出色工作绝对值得投票。快乐编码！

<div class="row">
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 5</figcaption>
            </figure>
    </span>
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 6</figcaption>
            </figure>
    </span>
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 7</figcaption>
            </figure>
    </span>
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 8</figcaption>
            </figure>
    </span>
</div>