Replace input text field by button maintaining filter functionality in Javascript

Question

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>

Answer 1

Hello, follow the code, I just switched from keyup to click, $(this). val() to $(this). attr("value"), the #filter in the jquery event, to the class. search (because it does not take more than one item with the same id), I also changed the value of "all" in html to "", this way it searches everything, and not a block with the value "all" tested and working! Abrass!

<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</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>

Javascript

$(function(){ 
  $(".busca").click(function(){
    var texto = $(this).attr("value");

    $(".bloco").each(function(){
      var resultado = $(this).text().toUpperCase().indexOf(' '+texto.toUpperCase());

      if(resultado < 0) {
        $(this).fadeOut();
      }else {
        $(this).fadeIn();
      }
    }); 

  });

});