WordPress Hosting
Free Photos
WordPress Themes

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(); }); }); });
Expand for more options Login