Filtros Bootstrap (Avanzado)
Filtros de arranque
Bootstrap no tiene un componente que permita filtrar. Sin embargo, podemos usar jQuery para filtrar/buscar elementos.
Filtrar tablas
Realice una búsqueda que no distinga entre mayúsculas y minúsculas para los elementos de una tabla:
Ejemplo
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>
Ejemplo explicado: usamos jQuery para recorrer cada fila de la tabla para verificar si hay valores de texto que coincidan con el valor del campo de entrada. El toggle()método oculta la fila ( display:none) que no coincide con la búsqueda. Usamos el toLowerCase()método para convertir el texto a minúsculas, lo que hace que la búsqueda no distinga entre mayúsculas y minúsculas (permite "john", "John" e incluso "JOHN" en la búsqueda).
Filtrar listas
Realice una búsqueda que no distinga entre mayúsculas y minúsculas para los elementos de una lista:
Ejemplo
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filtrar menús desplegables
Realice una búsqueda sin distinción entre mayúsculas y minúsculas para elementos en un menú desplegable:
Ejemplo
Open the dropdown menu and type something in the input field to search for dropdown items:
Filtrar cualquier cosa
Realice una búsqueda de texto que no distinga entre mayúsculas y minúsculas dentro de un elemento div:
Ejemplo
I am a paragraph.
Another paragraph.