0

Tenho uma lista de ckeckbox onde cada um é um bairro, aí queria que ao ir digitando o nome do bairro, ele vai fitrando e deixando só os bairros que contém o que é digitado, igual esse (clicar em filtrar por bairro):

http://www.sjcvaleimoveis.com.br/buscador/comprar/apartamento/cidade/S%C3%A3o%20Jos%C3%A9%20dos%20Campos/residencial/#

Meus checkbox estão assim:

<div>
 <div class="span3" style="float:left;padding-right:10px;margin-left:0px;">
  <input type="checkbox" value="43" name="bairro[]" id="bairro0">&nbsp; Aclimação
 </div>
 <div class="span3" style="float:left;padding-right:10px;margin-left:0px;">
  <input type="checkbox" value="2" name="bairro[]" id="bairro1">&nbsp; Alto da Boa Vista
 </div>
</div>

1 Resposta 1

1

Usando o evento KeyUp em um input, em seguida um timeout para atrasar o filtro, ou seja, executando 300ms depois que o usuário para de digitar, ficaria assim:

var $divs = $('.span3');
var timer_ = null;

$("#id_busca").keyup(function(){
    var nome = $(this).val().trim();   
    
    //Remove o timeout caso ele ainda não foi executado e o usuário digitou 
    clearTimeout(timer_);
    
    timer_ = setTimeout(function(){
      $divs.each(function(){
          if(this.innerText.trim().toLowerCase().indexOf(nome.toLowerCase()) === -1){   
              $(this).hide();
          }else{
              $(this).show();
          }                             
      })
    }, 300);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="id_busca">


<div>
 <div class="span3" style="float:left;padding-right:10px;margin-left:0px;">
  <input type="checkbox" value="43" name="bairro[]" id="bairro0">&nbsp; Aclimação
 </div>
 <div class="span3" style="float:left;padding-right:10px;margin-left:0px;">
  <input type="checkbox" value="2" name="bairro[]" id="bairro1">&nbsp; Alto da Boa Vista
 </div>
 
 <div class="span3" style="float:left;padding-right:10px;margin-left:0px;">
  <input type="checkbox" value="45" name="bairro[]" id="bairro0">&nbsp; Rua sem endereco
 </div>
 
 
 <div class="span3" style="float:left;padding-right:10px;margin-left:0px;">
  <input type="checkbox" value="46" name="bairro[]" id="bairro0">&nbsp; Alto do Benfica
 </div>
</div>

3
  • funcionou, só deu um problema, o class span3, tem o width em 23% aí quando começo a busca, ele meio que espreme os bairros: vnc.com.br/busca Commented 7/12/2017 às 13:46
  • @LeandroMarzullo, blz mano, só melhorar o css mesmo.
    – N. Dias
    Commented 7/12/2017 às 13:55
  • deu certo, tinha um float:left desnecessáior e agora está ok, Brigadão!!!! Commented 7/12/2017 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .