jQuery - Filtros
Filtros jQuery
Use jQuery para filtrar/pesquisar elementos específicos.
Filtrar Tabelas
Execute uma pesquisa sem distinção entre maiúsculas e minúsculas para itens em uma tabela:
Exemplo
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>
Exemplo explicado: Usamos jQuery para percorrer cada linha da tabela para verificar se há algum valor de texto que corresponda ao valor do campo de entrada. O toggle()método oculta a linha ( display:none) que não corresponde à pesquisa. Usamos o toLowerCase()método DOM para converter o texto em minúsculas, o que torna a pesquisa insensível (permite "john", "John" e até "JOHN" na pesquisa).
Listas de filtros
Execute uma pesquisa sem distinção entre maiúsculas e minúsculas para itens em uma lista:
Exemplo
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filtrar qualquer coisa
Faça uma pesquisa sem distinção entre maiúsculas e minúsculas para texto dentro de um elemento div:
Exemplo
I am a paragraph.
Another paragraph.