Bootstrap 4 filtry (pokročilé)
Bootstrap 4 filtry
Bootstrap nemá komponentu, která umožňuje filtrování. K filtrování / vyhledávání prvků však můžeme použít jQuery .
Filtrovat tabulky
Proveďte vyhledávání položek v tabulce bez ohledu na velikost písmen:
Příklad
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>
Vysvětlený příklad: jQuery používáme k procházení jednotlivých řádků tabulky, abychom zkontrolovali, zda existují nějaké textové hodnoty, které odpovídají hodnotě vstupního pole. Metoda toggle
skryje řádek ( display:none
), který neodpovídá hledání. Používáme toLowerCase()
metodu k převodu textu na malá písmena, díky čemuž se při vyhledávání nerozlišuje velká a malá písmena (umožňuje vyhledávání „Jan“, „John“ a dokonce i „JOHN“).
Seznamy filtrů
Proveďte vyhledávání položek v seznamu bez ohledu na velikost písmen:
Příklad
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filtrovat cokoliv
Proveďte vyhledávání textu uvnitř prvku div bez ohledu na velikost písmen:
Příklad
I am a paragraph.
Another paragraph.