Daten clientseitig filtern: CSS, jQuery und React im Vergleich

Nehmen wir an, Sie haben eine Liste von 100 Namen.

<ul>
  <li>Randy Hilpert</li>
  <li>Peggie Jacobi</li>
  <li>Ethelyn Nolan Sr.</li> 
  <!-- and then some -->
</ul>

...oder Dateinamen, oder Telefonnummern, oder was auch immer. Und Sie möchten diese clientseitig filtern, was bedeutet, dass Sie keine serverseitige Anfrage stellen, um Daten zu durchsuchen und Ergebnisse zurückzugeben. Sie möchten einfach „rand“ eingeben und haben, dass die Liste gefiltert wird, um „Randy Hilpert“ und „Danika Randall“ einzuschließen, weil beide diese Zeichenkette enthalten. Alles andere wird nicht in den Ergebnissen angezeigt.

Schauen wir uns an, wie wir das mit verschiedenen Technologien machen könnten.

CSS kann es mit ein wenig Hilfe irgendwie tun.

CSS kann Elemente nicht basierend auf ihrem Inhalt auswählen, aber es kann Attribute und deren Werte auswählen. Also verschieben wir die Namen auch in Attribute.

<ul>
  <li data-name="Randy Hilpert">Randy Hilpert</li>
  <li data-name="Peggie Jacobi">Peggie Jacobi</li>
  <li data-name="Ethelyn Nolan Sr.">Ethelyn Nolan Sr.</li> 
  ...
</ul>

Um diese Liste nach Namen zu filtern, die „rand“ enthalten, ist es sehr einfach

li {
  display: none;
}
li[data-name*="rand" i] {
  display: list-item;
}

Beachten Sie das `i` in Zeile 4. Das bedeutet „Groß-/Kleinschreibung ignorieren“, was hier sehr nützlich ist.

Um dies dynamisch mit einem Filter-`` zu machen, müssen wir JavaScript einbeziehen, um nicht nur auf die Eingabe im Filter zu reagieren, sondern auch CSS zu generieren, das mit der Suche übereinstimmt.

Nehmen wir an, wir haben einen `