Bootstrap 4- filters (gevorderd)
Bootstrap 4-filters
Bootstrap het nie 'n komponent wat filter toelaat nie. Ons kan egter jQuery gebruik om elemente te filter / soek.
Filter tabelle
Voer 'n hoofletter-onsensitiewe soektog na items in 'n tabel uit:
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 verduidelik: Ons gebruik jQuery om deur elke tabelrye te loop om te kyk of daar enige tekswaardes is wat ooreenstem met die waarde van die invoerveld. Die togglemetode versteek die ry ( display:none) wat nie by die soektog pas nie. Ons gebruik die toLowerCase()metode om die teks na kleinletters om te skakel, wat die soekkas ongevoelig maak (laat "john", "John" en selfs "JOHN" toe op soek).
Filter lyste
Voer 'n hoofletter-onsensitiewe soektog na items in 'n lys uit:
Voorbeeld
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filter enigiets
Voer 'n hoofletter-onsensitiewe soektog na teks binne 'n div-element uit:
Voorbeeld
I am a paragraph.
Another paragraph.