Pesquisar e ocultar/mostrar conteúdos
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;
}
Alguém que realmente entenda de Jquery pode me ajudar a adaptar este exemplo para utilização com divs e classes?Discussão (0)
Carregando comentários...