Filtri Bootstrap 4 (avanzati)
Bootstrap 4 Filtri
Bootstrap non ha un componente che consente il filtraggio. Tuttavia, possiamo usare jQuery per filtrare/cercare elementi.
Filtra tabelle
Esegui una ricerca senza distinzione tra maiuscole e minuscole per gli elementi in una tabella:
Esempio
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>
Esempio spiegato: usiamo jQuery per scorrere ogni riga della tabella per verificare se sono presenti valori di testo che corrispondono al valore del campo di input. Il toggle
metodo nasconde la riga ( display:none
) che non corrisponde alla ricerca. Usiamo il toLowerCase()
metodo per convertire il testo in minuscolo, il che rende la ricerca insensibile alle maiuscole (consente "john", "John" e persino "JOHN" durante la ricerca).
Filtra elenchi
Esegui una ricerca senza distinzione tra maiuscole e minuscole per gli elementi in un elenco:
Esempio
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filtra qualsiasi cosa
Esegui una ricerca senza distinzione tra maiuscole e minuscole per il testo all'interno di un elemento div:
Esempio
I am a paragraph.
Another paragraph.