Filtro de palavras com JavaScript
HTML
<div class="busca">
<input id="filtro" type="text" placeholder="Busca Rápida">
</div>
<div class="blocos">
<div class="bloco">
<h3>Este é o Titulo 1</h3>
<p>Um texto para o bloco de numero 1</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 2</h3>
<p>alguma coisa ai para ser diferente do resto</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 3</h3>
<p>vamos diferenciar o bloco 3 também</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 4</h3>
<p>com o bloco 4 não pode ser diferente</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 5</h3>
<p>não sei o que escrever no bloco 5</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 5</h3>
<p>esse vai com o mesmo titulo para ficar legal</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 3</h3>
<p>o com o mesmo titulo do bloco 3</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 1</h3>
<p>Um texto para o bloco de numero 1</p>
</div>
<div class="bloco">
<h3>Este é o Titulo 1</h3>
<p>Um texto para o bloco de numero 1</p>
</div>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
*{
margin: 0;
padding: 0;
}
body {
background: #ecf0f1;
}
.busca {
padding: 10px;
width: 100%;
background-color: #1abc9c;
margin-bottom: 20px;
}
.busca input {
display: block;
width: 70%;
height: 30px;
padding: 0 5px;
margin: 0 auto;
}
.blocos {
display: block;
width: 90%;
margin: 0 auto;
text-align: center;
}
.blocos .bloco {
width: 29%;
display: inline-block;
background: #16a085;
padding: 10px;
margin: 5px;
transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
cursor: pointer;
}
.blocos .bloco:hover { transform: scale(1.2); }
.blocos h3 {
font-family: 'Montserrat', sans-serif;
text-align: center;
color: #FFFFFF;
padding-bottom: 5px;
}
.blocos p {
font-family: 'Montserrat', sans-serif;
text-align: left;
}
JAVASCRIPT
$(function(){
$("#filtro").keyup(function(){
var texto = $(this).val();
$(".bloco").each(function(){
var resultado = $(this).text().toUpperCase().indexOf(' '+texto.toUpperCase());
if(resultado < 0) {
$(this).fadeOut();
}else {
$(this).fadeIn();
}
});
});
});
