How to filter the div as we search in search box?

Question

I made a page with 9 cards. The card is with the class name "card". I want to get the card when I type the letters. I want this to be filtered on the basis of p tag that consist "First project", "Second project" and so on for seven more.

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>

I am not able to filter it when I type in the search box. Kindly guide on what is wrong and what I can do to display the card that I searched.

Answer 1

The bug is on line 2

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

debugging it should give you:

let input = document.getElementsByClassName('searchbar').value;

Also on line 4, change:

let x = document.querySelector('.card p');

to:

let x = document.querySelectorAll('.card p');

Answer 2

Change the line,

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

To,

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

-> Because using getElementById you can select the element with particular id but here you are using class and you cannot do like this..

But anyhow it is always the best practice to make function call in the javascript file with the help of addEventListener() and remove onkeyup="search()" in HTML template

-> Consider using nth selection option to select the first p element which is second element from card div like ('.card p:nth-child(2)'),

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

Note that here you need to use querySelectorAll to get all the elements with the selection and this will return array of elements..

Working Snippet as follows,

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

Changed your getElementById() to querySelector() since you used css class selector to select searchbox.

Changed your querySelector() to querySelectorAll() since you want to select multiple card p elements.

Changed the search() function name to filter() since it was conflicting with the name attribute of the searchbox which was also search. Alternatively you can bind the event handler in JavaScript. Declaring event handlers inline is considered bad practice by many developers.

Last I changed the search logic so it filters the cards based on the title alone since you had 2 p elements in each card. Also hidden the card element instead of the p elements. I added the title class the the title p to use it as a selector.

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 4

This is one of my old projects. I used insted of card, but I get it that you are tring to do the same process which I did.

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

Answer 5

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