Replace input text field by button maintaining filter functionality in Javascript

Asked

Viewed 123 times

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

1 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();
      }
    }); 

  });

});
  • How to do so that instead of showing all, the default is to show the screen without data and only show after being clicked on filters is possible?

  • 1

    I added the first 3 lines, swap your script for this: $(".bloco").each(function(index,bloco){&#xA; $(bloco).fadeOut();&#xA;})&#xA;$(function(){ &#xA; $(".busca").click(function(){&#xA; var texto = $(this).attr("value");&#xA;&#xA; $(".bloco").each(function(){&#xA; var resultado = $(this).text().toUpperCase().indexOf(' '+texto.toUpperCase());&#xA;&#xA; if(resultado < 0) {&#xA; $(this).fadeOut();&#xA; }else {&#xA; $(this).fadeIn();&#xA; }&#xA; }); &#xA;&#xA; });&#xA;&#xA;});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.