How to filter checkbox list as you type? (search neighborhoods)

Question

I have a list of ckeckbox where each one is a neighborhood, so I wanted that when typing the name of the neighborhood, he stares and leaving only the neighborhoods that contain what is typed, just like this (click filter by neighborhood):

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

My checkbox is like this:

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

Answer 1

Using the Keyup event in an input, then a timeout to delay the filter, ie running 300ms after the user stops typing, would look like this:

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>