jQuery - Filtry
Filtry jQuery
Użyj jQuery do filtrowania/wyszukiwania określonych elementów.
Filtruj tabele
Przeprowadź wyszukiwanie bez rozróżniania wielkości liter dla elementów w tabeli:
Przykład
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>
Wyjaśnienie przykładu: Używamy jQuery, aby przejść przez każdy wiersz tabeli, aby sprawdzić, czy istnieją jakieś wartości tekstowe, które pasują do wartości pola wejściowego. Metoda toggle()ukrywa wiersz ( display:none), który nie pasuje do wyszukiwania. Używamy toLowerCase()metody DOM do konwersji tekstu na małe litery, co sprawia, że wielkość liter wyszukiwania jest niewrażliwa (umożliwia „john”, „John”, a nawet „JOHN” podczas wyszukiwania).
Listy filtrów
Przeprowadź wyszukiwanie bez rozróżniania wielkości liter dla elementów na liście:
Przykład
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filtruj wszystko
Przeprowadź wyszukiwanie tekstu w elemencie div bez uwzględniania wielkości liter:
Przykład
I am a paragraph.
Another paragraph.