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

Question

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

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

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

当我在搜索框中键入内容时，无法对其进行过滤。请就什么地方有问题以及如何显示所搜索的卡片提供指导。

Answer 1

由于您使用css类选择器选择了搜索框，因此将getElementById()更改为querySelector()。

由于您要选择多个卡片p元素，因此将querySelector()更改为querySelectorAll()。

将search()函数名称更改为filter()，因为它与搜索框的名称属性（即search）冲突。或者，您可以在JavaScript中绑定事件处理程序。内联声明事件处理程序被许多开发人员认为是不好的做法。

最后，我更改了搜索逻辑，因此它仅根据标题过滤卡片，因为每张卡片中有2个p元素。还隐藏了card元素而不是p元素。我为标题类添加了标题p，以将其用作选择器。

function filter() {
  let input = document.querySelector('.searchbar').value //<-- Changed to querySelector
  input = input.toLowerCase();
  let cards = document.querySelectorAll('.card'); //<-- Changed to querySelectorAll with '.card' selector.

  //loop over cards and compare search with title.
  cards.forEach((el) => {
    let title = el.querySelector('.title').textContent.toLowerCase();
    el.style.display = title.includes(input) ? "list-item" : "none";
  });
}

<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="filter()" placeholder="Search.." name="search">
  </form>

  <section class="cards">
    <div class="card">
      <div class="card-box">700 x 400</div>
      <p class="title" 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 class="title" 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
  </section>
</div>

Answer 2

更改行，

let input = document.getElementById('.searchbar').value

收件人

let input = document.querySelector('.searchbar').value

->因为使用getElementById可以选择具有特定ID的元素，但是在这里使用的是class，因此不能这样做。

但是无论如何，始终最好的做法是在 addEventListener()的帮助下创建javascript文件，并在HTML模板中删除onkeyup="search()"

->考虑使用nth选择选项来选择第一个p元素，它是card div中的第二个元素，例如('.card p:nth-child(2)')，

const x = document.querySelectorAll('.card p:nth-child(2)');

请注意，这里您需要使用querySelectorAll来获取带有选择的所有元素，这将返回元素数组。

按以下方式工作代码段，

const searchEl = document.querySelector('.searchbox');
const x = document.querySelectorAll('.card p:nth-child(2)');

function search(e){
  x.forEach((item,index) => {
    if(!item.innerHTML.toLowerCase().includes(e.target.value)){
      item.parentElement.style.display = 'none';
    }else {
      item.parentElement.style.display = 'block';
    }
  })
}

searchEl.addEventListener("keyup", search);   

<div class="main">

  <h3 class="first">Page Heading <span class="span-text">Secondary Text</span></h3>
  <form class='searchbox'>
    <input class="searchbar" type="text" 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>

Answer 3

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';
   });
}

Answer 4

这是我的老项目之一。我曾经用过insted卡，但我知道您正在尝试执行与我相同的过程。

<script>
    function myFunction() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }

    var uls = document.querySelectorAll('ul');
    for (var j = 0; j < uls.length; j++) {
        var ul = uls.item(j);
        for (var i = ul.children.length; i >= 0; i--) {
            ul.appendChild(ul.children[Math.random() * i | 0]);
        }
    }
</script>

HTML：

<ul id="myUL">

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110057</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Rajesh Kumar
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110019</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110047</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110047</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110047</p>
        </a></li>
</ul>