Question

0

428

Views

How to filter an item by card correctly with javascript?

How to make a search filter with javascript? I'm trying to do it, but I'm not succeeding.

This is my input with the button to search for a particular builder

My goal is to create a filter with the items that are on the card by putting the name of a specific builder in the search filter.

This my javascript

  function searchProduct(){
       const input = document.getElementById('filter').value.toUpperCase();

       const cardContainer = document.getElementById('card-list');
       console.log(cardContainer);

       const cards = cardContainer.getElementByClassName('card');
       console.log(cards);

       for(let i = 0; i < cards.length; i++){
        let title = cards[i].querySelector(".body h5.card-title");

        console.log(title);

        if(title.innerText.toUpperCase().indexOf(input) > -1) {
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }

}

And this is my html code

<div class="row">
    <div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
        <input type="text" id="filter" onkeyup="searchProduct()" placeholder="ME INFORME O NOME DA CONSTRUTORA ...">
    </div>
</div><br>


<div id="card-list">

  <div class="col-lg-2 col-md-3">
      <div class="card hvr-grow cbox">
          <div class="body">
          <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div>
          <h5 class="card-title">ADSM</h5>
          <div class="card-footer">21/10/2021</div>
              <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a>
          </div>
      </div>
  </div>

  <div class="col-lg-2 col-md-3">
      <div class="card hvr-grow cbox">
          <div class="body">
          <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div>
          <h5 class="card-title">ALFA DO BRASIL</h5>
          <div class="card-footer">21/10/2021</div>
              <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a>
          </div>
      </div>
  </div
  
</div>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T05:21:30.015Z

I solved this problem like this

function searchConstrutora() {
        const input = document.getElementById('filter').value.toUpperCase();

        const cardContainer = document.getElementById('card-list');
        console.log(cardContainer);

        const cards = cardContainer.getElementsByClassName('card');
        console.log(cards);

        for(let i = 0; i < cards.length; i++) {
            let title = cards[i].querySelector(".card-body h5.card-title");
            console.log(title);

            if(title.innerText.toUpperCase().indexOf(input) > -1) {
                cards[i].style.display = "";
            } else {
                cards[i].style.display = "none";
            }

        }
    }

Answer 2 · 2022-07-11T05:21:30.023Z

try

title.innerText.toUpperCase().indexOf(input) > -1

instead of title.innterText

0

428

How to filter an item by card correctly with javascript?

2 answers

0

0

Find remote jobs

Andres GPT