Olá pessoas, hoje vou mostrar como fazer uma pesquisa rápida dentro de um conteúdo de uma tabela de HTML sem usar banco de dados, ou seja, vamos fazer um campo de busca que traz os dados contidos numa tabela e esconde os demais.
Primeiro vamos a marcação em HTML, neste tutorial vamos usar a propriedade table, para este exemplo é importante que você use as propriedades thead e tbody para que funcione bacana, essas duas tag´s servem para mostrar ao navegador onde está o cabeçalho da sua tabela (parte onde tem os títulos da tabela) e onde fica o corpo da sua tabela (parte dos dados da tabela). Veja o exemplo abaixo:
<table class="lista-clientes"> <thead> <tr> <th align="center">#</th> <th>Cliente</th> <th>Carro</th> </tr> </thead> <tbody> <tr> <td align="center">1</td> <td>José Ribeiro</td> <td>VW Gol 1.0</td> </tr> <tr> <td align="center">2</td> <td>Maria Conceição</td> <td>Fiat Palio 1.0</td> </tr> <tr> <td align="center">3</td> <td>Lourdes Silva</td> <td>Chevrolet Cosa 1.0</td> </tr> <tr> <td align="center">4</td> <td>Marcos Henrique</td> <td>VW Jetta 2.0</td> </tr> </tbody> </table>
Para o campo de buscar você precisa de um imput do tipo texto com a classe input-search e com o atributo alt o mesmo da classe da tabela no nosso exemplo é lista-clientes, como mostra o exemplo abaixo:
<script type="text/javascript" src="jquery.js"></script>
Agora vamos instanciar a biblioteca do jQuery
<input type="text" class="input-search" alt="lista-clientes" placeholder="Buscar nesta lista" />
E agora o código para fazer a pesquisa dentro da tabela conforme você vai digitando
$(function(){ $(".input-search").keyup(function(){ //pega o css da tabela var tabela = $(this).attr('alt'); if( $(this).val() != ""){ $("."+tabela+" tbody>tr").hide(); $("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show(); } else{ $("."+tabela+" tbody>tr").show(); } }); }); $.extend($.expr[":"], { "contains-ci": function(elem, i, match, array) { return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; } });
<script type="text/javascript" src="jquery.quick.search.js"></script>
Agora vamos estilizar um pouco as coisas aqui, vamos dar uma cara melhor ao nosso código, veja o CSS abaixo:
<style type="text/css"> body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif } /* " Para o input */ .input-search{ border:1px solid #CCC; padding:5px 14px; font-size:12px; margin:10px 0; -webkit-border-radius:15px; -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; border-radius:15px; } .input-search::-webkit-input-placeholder{ font-style:italic } .input-search:-moz-placeholder { font-style:italic } .input-search:-ms-input-placeholder { font-style:italic } /* " Para a tabela */ table.lista-clientes{ border-collapse:collapse; font-size:11px; font-family:Tahoma, Geneva, sans-serif; } table.lista-clientes th{ padding:5px; background:#EEE; border:1px solid #CCC; } table.lista-clientes td{ padding:3px; border:1px solid #CCC; } </style>
Importante este trecho de código funciona para a lista que esta sendo exibida, caso tenha uma paginação não exibira os dados das páginas seguintes, ou seja mostrará apenas o que o usuário ver na tela não o que está no banco de dados.
Fonte: http://blogs.digitss.com
Tweet |
Bem bacana o artigo, era exatamente o que eu precisava. 🙂 Obrigada!
Obgada, pelo artigo!
Parabéns Adriano, ótimo post, uma função muito legal. Vai agilizar minhas paginas. Explicação simples e funcional. Abraço!!!
Adriano muito bom este seu código para pesquisa em uma tabela. Eu implementei ele em uma tabela que mescla células usando o td rowspan. Neste caso ao buscar nao mostra certo. Se puder me ajudar a fazer a modificação no código eu agradeço.
Fera, curti demais isso ai. 100%
Muito bom esse código, me ajudou muito.
Obrigado
Bom dia Adriano.
Muito bom seu post. Mas minha dúvida é o seguinte. Se eu tiver informações na tabela vindo do banco de dados, eu consigo adapta-lo para o mesmo?
parabens me ajudou pra caramba, to desenvolvendo um sistema e erá uma busca assim que eu tava precisando
boa noite amigo meus parabens pelo artigo gostei muito .tinha como vc me ajuda to criando um site e nele tem muita pagina ,eu queria saber se vc tem algum artigo falando como criar um sistema de busca para localizar o artigo dentro do site igual esse so que esse busca o que esta visivel eu queria que ele aparece o que esta em outra pagina desde ja agradeço.
obrigado amigo ,sempre estou olhando seu site .e script de comentario tem aqui no seu site igual a esse que eu esto escrevendo agora
Adriano,
Implementei esse código e funcionou perfeitamente, no entanto, tenho a necessidade de filtrar a tabela duas vezes. Selecionar primeiro a “CIDADE” e depois o “GRUPO RESPONSÁVEL”, mas esse filtro tem de ser feito apenas no que já foi filtrado anteriormente. Não sei se ficou claro. Poderia me ajudar?
MUITO obrigada!! Funcionou perfeitamente.
Perfeito, me ajudou muito. Obrigado
Como eu faço a pesquisa dessa forma adicionando paginação? Ou seja como pesquisar nessa tabela com paginação.
Muito bom, e fácil! apliquei na minha lista de dúvidas (ul) muito simples, é disso que precisamos. Vlw pelo compartilhamento Adriano!
Bom dia Adriano, Como eu faço para puxar as informações de um banco mysql e ao invés de tabela e usar divs? quando coloca a palavra na busca, ele exibe o resultado em divs!
Mano, gostaria de fazer isto ai, porém minha tabela está distribuídas em páginas, como poderia fazer a busca em toda a tabela e não apenas o que esta sendo visualizada