Bootstrap 4- filters (geavanceerd)
Bootstrap 4-filters
Bootstrap heeft geen component die filteren toestaat. We kunnen jQuery echter gebruiken om elementen te filteren / zoeken.
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 togglemethode verbergt de rij ( display:none) die niet overeenkomt met de zoekopdracht. We gebruiken de toLowerCase()methode om de tekst naar kleine letters te converteren, waardoor het zoeken niet hoofdlettergevoelig is (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.