jquery Pesquisar e ocultar/mostrar conteúdos

Guga Alves · Novembro 13, 2018

Preciso fazer uma pesquisa em uma DIV X, baseado no que for encontrado nas DIVs filhas da DIV X, os itens serão mostrados ou ocultados. Encontrei um exemplo que faz exatamente o que preciso fazer, porém ela esta sendo feita em uma tabela:

<div class="cont">

    <input type="text" class="input-search" alt="lista-clientes" placeholder="Buscar nesta lista" />
    
    <br style="clear:both">
    
    <table class="lista-clientes" width="100%">
        <thead>
            <tr>
                <th align="center" width="5%">#</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>

</div>

$(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;
	}
});

/* > Para o input */
	.input-search{
		border:1px solid #CCC;
		padding:5px 14px;
		font-size:12px;
		margin:10px 0;
		float:right;
		
		-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 }
	
	table.lista-clientes{
		border-collapse:collapse;
		font-size:12px;
		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;
		}
	
	.cont{
		width:300px;
		margin:30px;
		overflow:hidden;
	}