Filtro Jquery
HTML
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
</head>
<body>
Filtrar lista:<br/>
<input type="text" id="txtBusca" placeholder="Digite aqui um valor para filtrar..."/>
<ul id="ulItens">
<li>Feijão</li>
<li>Arroz</li>
<li>Farinha</li>
<li>Açúcar</li>
<li>Macarrão</li>
</ul>
</body>
</html>
CSS
*{
font-family:"Century Gothic", Arial;
font-size:20px;
}
input[type="text"]{
width:100%;
border:solid 1px;
}
ul{
padding:0;
margin:0;
}
ul li{
list-style:none;
border:dashed 1px;
padding:5px;
}
JAVASCRIPT
$(function(){
$("#txtBusca").keyup(function(){
var texto = $(this).val();
$("#ulItens li").css("display", "block");
$("#ulItens li").each(function(){
if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
$(this).css("display", "none");
//$(this).fadeOut();
});
});
});
