Filtry Bootstrap (zaawansowane)
Filtry Bootstrap
Bootstrap nie posiada komponentu umożliwiającego filtrowanie. Możemy jednak użyć jQuery do filtrowania/wyszukiwania 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 tej toLowerCase()metody do konwersji tekstu na małe litery, co sprawia, że wielkość liter wyszukiwania jest niewrażliwa (pozwala na wyszukiwanie „Jan”, „John”, a nawet „JOHN”).
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 listy rozwijane
Przeprowadź wyszukiwanie elementów w menu rozwijanym bez rozróżniania wielkości liter:
Przykład
Open the dropdown menu and type something in the input field to search for dropdown items:
Filtruj wszystko
Przeprowadź wyszukiwanie tekstu w elemencie div bez uwzględniania wielkości liter:
Przykład
I am a paragraph.
Another paragraph.