J'ai fait une page avec 9 cartes. La carte porte le nom de classe "carte". Je veux obtenir la carte lorsque je tape les lettres. Je veux que cela soit filtré sur la base de la balise p qui consiste en "Premier projet", "Deuxième projet" et ainsi de suite pendant sept autres.

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>

Je ne parviens pas à le filtrer lorsque je tape dans la zone de recherche. Veuillez indiquer ce qui ne va pas et ce que je peux faire pour afficher la carte que j'ai recherchée.

0
Shirish Pokhrel 2 juin 2020 à 09:19

3 réponses

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';
   });
}
0
Sviatoslav Miller 2 juin 2020 à 06:27

C'est l'un de mes anciens projets. J'utilise à la place de la carte, mais je comprends que vous essayez de faire le même processus que moi.

<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>
0
Nargesh Rana 2 juin 2020 à 06:41

Vous avez remplacé votre getElementById() par querySelector() depuis que vous avez utilisé le sélecteur de classe css pour sélectionner le champ de recherche.

Vous avez remplacé votre querySelector() par querySelectorAll() car vous souhaitez sélectionner plusieurs éléments de la carte p.

Le nom de la fonction search() a été remplacé par filter() car il était en conflit avec l'attribut name de la boîte de recherche qui était également search. Vous pouvez également lier le gestionnaire d'événements en JavaScript. La déclaration de gestionnaires d'événements en ligne est considérée comme une mauvaise pratique par de nombreux développeurs.

Enfin, j'ai changé la logique de recherche afin qu'elle filtre les cartes en fonction du titre seul puisque vous aviez 2 éléments p dans chaque carte. Également masqué l'élément card au lieu des éléments p. J'ai ajouté la classe de titre au titre p pour l'utiliser comme sélecteur.

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>
1
Mark Baijens 2 juin 2020 à 11:14