Replace input text field with button while maintaining filter functionality in JavaScript

Question

Replace input text field with button while maintaining filter functionality in JavaScript

Navigation

#1 by (1 votes)

0

I found this filter in javascript that is working fine, but it is a text-type input, and I would like to convert the input into hrefs links, but I have not yet achieved

As it is:

$(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><divclass="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 typing it to click on a href and the filter was done

$(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><ahref="#" 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>

javascript jquery

asked by anonymous 30.10.2018 / 16:09

1 answer

Change messages from mandatory wordpress fields How do I show an image according to given Number being this number is by random in python?

score 1 · Accepted Answer

Hello, follow the code, I just changed from keyup to click, $ (this) .val () to $ (this) .attr ("value"), the #filter in the jquery event, for the class. (it does not get more than one item with the same id), I also changed the value of "all" in html to "", so it searches for everything, 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><ahref="#" 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();
      }
    }); 

  });

});