[在搜索框中搜索时如何过滤div？

Question

我用9张卡片做了一页。该卡的类别名称为“ card”。我想输入字母时得到卡。我希望基于包含“第一个项目”，“第二个项目”等等的p标签进行过滤，以进行另外七个操作。

HTML页面：

<div class="main">

    <h3 class="first">Page Heading <span class="span-text">Secondary Text</span></h3>
    <form class='searchbox' >
        <input class="searchbar" type="text" onkeyup="search()" placeholder="Search.." name="search">
   </form>

    <section class="cards">
      <div class="card">
        <div class= "card-box">700 x 400</div>
        <p style="color:blue; font-size:1.5rem;">First Project</p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
          quod non sed eveniet numquam perferendis.
        </p>
      </div>


      <div class="card">
        <div class= "card-box">700 x 400</div>
        <p style="color:blue; font-size:1.5rem;">Second Project</p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
          quod non sed eveniet numquam perferendis.
        </p>
      </div>
//and seven more of same "card" class
  </div>

作为要过滤的JavaScript函数，我编写了以下程序：

function search() { 
let input = document.getElementById('.searchbar').value 
input=input.toLowerCase(); 
let x = document.querySelector('.card p'); 

for (i = 0; i < x.length; i++) {  
    if (!x[i].innerHTML.toLowerCase().includes(input)) { 
        x[i].style.display="none"; 
    } 
    else { 
        x[i].style.display="list-item";                  
    } 
} 
}     

当我在搜索框中输入文字时，我无法对其进行过滤。请就什么是错以及如何显示所搜索的卡片提供指导。

Answer 1

function search() {
   // Get input value
   const input = document.querySelector('.searchbox > .searchbar').value.toLowerCase();
   // Get all cards in page
   const cards = document.querySelectorAll('.cards > .card');
   cards.forEach(card => {
      // Get card title
      const title = card.querySelector('p').innerText.toLowerCase();
      // Hide card if card title does not match
      card.style.display = title.includes(input) ? null : 'none';
   });
}