Bootstrap- filters (gevorderd)
Bootstrap-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 toggle()metode 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 dropdowns
Voer 'n hoofletter-onsensitiewe soektog na items in 'n aftreklys uit:
Voorbeeld
Open the dropdown menu and type something in the input field to search for dropdown items:
Filter enigiets
Voer 'n hoofletter-onsensitiewe soektog na teks binne 'n div-element uit:
Voorbeeld
I am a paragraph.
Another paragraph.