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

Question

我正在设计一个用于俱乐部管理的网站，并希望在其中添加搜索过滤器功能，如何使用JavaScript执行此操作，以便我可以通过键入俱乐部名称(这是"figcaption"标签(来过滤搜索结果？

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

Answer 1

你可以尝试这样的事情，创建一个搜索栏并调用函数。

function tagsearch(caption) {
  let result = document.querySelectorAll("span")
  result.forEach((ele) => {
    if (ele.childNodes[1].childNodes[3].textContent.trim() === caption) {
      ele.style.display = "block"
    } else {
      ele.style.display = "none"
    }
  })
}

<div><input type="text" id="search" onchange="tagsearch(this.value)"></div>
<div class="row" id="add">
  <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>
<div id="add"></div>