jQuery - Filters
jQuery-filters
Gebruik jQuery om spesifieke 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()DOM-metode om die teks na kleinletters om te skakel, wat die soekkas ongevoelig maak (laat "john", "John" en selfs "JOHN" op soektog toe).
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.