Buscar conteúdo na página – Função keyUp do jQuery

• Home-
• javaScript, jQuery/
• autor: Adriano Meira /
• publicado em: 23/05/2015

Olá Pessoas, depois de um lingo tempo estou escrevendo de novo, desta vez vamos falar de algo mais simples e que pode ajudar muita gente, vamos imaginar que você tenha uma lista pessoas e telefones bem grande e para facilitar para encontrar um telefone vamos colocar um campo de busca que ao digitar o nome e telefone fiquem visíveis na tela sem precisar buscar em banco de dados.

Vamos começar com o nosso HTML, vou utilizar TABLE para fazer a lista, mas pode ser com outro elemento como UL ou DIV, mas abaixo explicarei onde poder mudar este tipo de referência.

<table id="lista_contatos">
    <thead>
        <tr>
	    <th width="150">Nome</th>
	    <th width="60">Telefone</th>
	</tr>
	<tr>
	    <td colspan="2">
	        <input type="text" placeholder="Procurar nesta lista" id="buscar_contatos">
	    </td>
	</tr>
    </thead>
    <tbody>
        <tr>
	    <td>Amanda Soares</td>
	    <td>(12) 3456-7890</td>
	</tr>
	<tr>
	    <td>Breno Alcantara</td>
	    <td>(12) 3456-7890</td>
	</tr>
	<tr>
	    <td>Carlos Peixoto</td>
	    <td>(12) 3456-7890</td>
	</tr>
	<tr>
	    <td>Cleber Dutra</td>
	    <td>(12) 3456-7890</td>
	</tr>
	<tr>
	    <td>Joaquim Mendonça</td>
	    <td>(12) 3456-7890</td>
	</tr>
	<tr>
	    <td>Lúcia Silva</td>
	    <td>(12) 3456-7890</td>
	</tr>
	<tr>
	    <td>Lucas Xavier</td>
	    <td>(12) 3456-7890</td>
	</tr>
    </tbody>
</table>

Agora vamos ao jQuey, abaixo faço algumas considerações sobre o código:

<script type="text/javascript">
	$(function(){

	    $('#buscar_contatos').keyup(function(){
	        var filter = $(this).val();
	        var count = 0;
	        $("#lista_contatos tbody tr").each(function(){
	            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
	                $(this).fadeOut();
	            }else{
	                $(this).show();
	                count++;
	            }
	        });                    
	    });

	})
</script>

Para esta função vamos utilizar o keyUp, esta função permite que se retorne o valor a cada novo carácter digitado dentro do campo, para maiores detalhes veja a documentação https://api.jquery.com/keyup/

Após ele entrar na função guardo em uma variável seu valor e instancio uma nova, depois disso vamos utilizar a função each, esta função varre seu HTMl em busca do seletor que você determinou, em nosso exemplo, ele busca dentro da tabela de lista todos os TR´s dentro do TBODY e checa se o valor de texto deste campo é menor que 0 (vazio) e esconde a TR, caso contrário ele exibe esta TR. Como bônus a função RegExp, ajuda a procurar mesmo tendo letras maiúsculas ou minúsculas.

Bom é isso ai pessoal, espero ter ajudado vocês com este artigo e até a próxima!

---

Tweet