jQuery - Filters
jQuery-filters
Gebruik jQuery om te filteren/zoeken naar specifieke elementen.
Tabellen filteren
Voer een hoofdletterongevoelige zoekopdracht uit naar items in een tabel:
Voorbeeld
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
Voorbeeld uitgelegd: we gebruiken jQuery om door elke tabelrij te lopen om te controleren of er tekstwaarden zijn die overeenkomen met de waarde van het invoerveld. De toggle()methode verbergt de rij ( display:none) die niet overeenkomt met de zoekopdracht. We gebruiken de toLowerCase()DOM-methode om de tekst naar kleine letters te converteren, wat het zoeken niet hoofdlettergevoelig maakt (laat "john", "John" en zelfs "JOHN" toe bij het zoeken).
Lijsten filteren
Voer een hoofdletterongevoelige zoekopdracht uit naar items in een lijst:
Voorbeeld
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Alles filteren
Voer een hoofdletterongevoelige zoekopdracht uit naar tekst in een div-element:
Voorbeeld
I am a paragraph.
Another paragraph.