Buscador en lista con jquery 2
Con divs
by Edgar Martinez
HTML
<link rel="stylesheet" href="http://maple2musicland.com/css/bootstrap.min.css">
<script src="http://maple2musicland.com/js/bootstrap.min.js"></script>
<input type="text" class='form-control' id="txtBusca"/><br/><br/><br/><br/>
<div class='row'>
<div class='col-sm-4'>
<div class='panel panel-perfil'>
<div class='panel-heading' style='cursor:default;text-decoration: underline;'>Batman</div>
<center>
<div class='panel-body'>
<img src='' class='img-responsive' style='width:110px; height:70px;' alt='Image'>
</div>
</center>
<div class='panel-footer'>Porque soy batman</div>
<div class='panel-footer'>
<center>
<button midi='data:audio/midi;base64,$midiBase64' class='btnPopMusic'>ESCUCHAR</button>
<button class='btnDownload' cancion='$cancion' nombre='$song'>DESCARGAR</button>
</center>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-4'>
<div class='panel panel-perfil'>
<div class='panel-heading' style='cursor:default;text-decoration: underline;'>Robin</div>
<center>
<div class='panel-body'>
<img src='' class='img-responsive' style='width:110px; height:70px;' alt='Image'>
</div>
</center>
<div class='panel-footer'>Porque soy robin</div>
<div class='panel-footer'>
<center>
<button midi='data:audio/midi;base64,$midiBase64' class='btnPopMusic'>ESCUCHAR</button>
<button class='btnDownload' cancion='$cancion' nombre='$song'>DESCARGAR</button>
</center>
</div>
</div>
</div>
</div>
JavaScript
$("#txtBusca").keyup(function(){
var texto = $(this).val().toLowerCase();
$(".col-sm-4").css("display", "block");
$(".col-sm-4 .panel-heading").each(function(){
console.log($(this).text().indexOf(texto));
if($(this).text().toLowerCase().indexOf(texto) < 0){
var padre=$(this).parent().parent();
padre.css("display", "none");
}
});
});