-1
I found this javascript filter that is working and very well, but it is a text type input, and I would like to convert the input into hrefs links, but I haven’t been able to yet
How is it:
$(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();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="busca">
<input id="filtro" type="text" placeholder="Busca Rápida">
</div>
<div class="blocos">
<div class="bloco">
<h3>bloco 1</h3>
<p>Um texto para o bloco de numero 1</p>
</div>
<div class="bloco">
<h3>bloco 2</h3>
<p>Um texto para o bloco de numero 2</p>
</div>
I would like instead of the user to type it to click on a href and filter
$(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();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >
<a href="#" class="busca" id="filtro" value="bloco 1">bloco 1</a>
<a href="#" class="busca" id="filtro" value="bloco 2">bloco 2</a>
<a href="#" class="busca" id="filtro" value="todos">todos</a>
</div>
<div class="blocos">
<div class="bloco">
<h3>bloco 1</h3>
<p>Um texto para o bloco de numero 1</p>
</div>
<div class="bloco">
<h3>bloco 2</h3>
<p>Um texto para o bloco de numero 2</p>
</div>
Hello, Miguel. Your question is not very clear. Maybe it would be nice if you click on "edit" and add more clarifications. What do you want to do after all? Already have some code?
– Wallace Maxters