1

Estou criando um form. No campo de texto quero colocar nele uma tela de auto-complete. Criei manualmente toda a estrutura que funciona como esperado

Ao digitar será apresentada opções que o usuario pode clicar pra auto-completar o campo

O problema é que está havendo um conflito entre os eventos e focusout e click

Aparentemente o evento de focusout é executado mais rápido que o de click, impossibilitando que eu consiga clicar na sugestão antes que ela seja escondida

Segue o código:

HTML

<form>
  <div class="i_select">
     <input type="text">
    <div class="remember">
      <ul>
        <li>Teste, testando, testado...</li>
      </ul>
    </div>
  </div>
</form>

CSS

input[type='text']{
  width:200px;
}
.i_select{
  width:200px;
  position:relative;
}
.remember{
  background:#eee;
  width:210px;
  position:absolute;
  top:20;
}
.remember ul{
 display:none 
}
.remember ul li{
  list-style-type:none;
}

JQUERY

$(document).ready(function(){
  $(':input').on('keyup',function(e){
    //Quando entrar com 3 caracteres ou mais exibe uma tela com sugestões (vindas do banco, como esse exemplo nao tem banco, criei uma sugestão pra simular)    
   if($(this).val().length > 3){
      $(this).parent().find('ul').show();
    }
  else{
    //Se for menos esconde
    $(this).parent().find('ul').hide();
  }

    //Se clicar em esc desconde a sugestao
    if (e.keyCode === 27){
       $(this).parent().find('ul').hide();
    } 
  });
  //Para escolher uma sugestao tem que clicar, pega o valor clicado e coloca no campo
  $('li').on('click',function(){
      $(this).parent().parent().parent().find(':input').val('Teste, testando, testado');
      $(this).parent().hide();
  });
  //Aqui mora o problema, quero que quando o campo seja desfocado a tela de sugestao desapareça
  //Porém quando é na hora de executar o clique pra selecionar uma opção o 'focusout' é executado primeiro que o 'click'. Assim a tela de sugestão some antes que o clique seja de fato executado.
  $(':input').on('focusout',function(){
    $(this).parent().find('ul').hide();
  });

});

EXEMPLO: https://jsfiddle.net/07qereby/2/

1 Resposta 1

1

Tente usar, ao invés de "click", "mousedown":

E outra coisa, ao invés de .parent().parent().parent(), pode usar .closest(), passado a class (ou id) do elemento que desejas limitar o avanço de hierarquia:

$(document).ready(function(){
  $(':input').on('keyup',function(e){
   if($(this).val().length > 3){
      $(this).parent().find('ul').show();
    }
    else{
      $(this).parent().find('ul').hide();
    }
    if (e.keyCode === 27){
       $(this).parent().find('ul').hide();
    } 
  });
  $('li').on(' mousedown',function(){
      $(this).closest('.i_select').find(':input').val('Teste, testando, testado');
      $(this).parent().hide();
  });
  $(':input').on('blur',function(){
    $(this).parent().find('ul').hide();
  });
});
input[type='text']{
  width:200px;
}
.i_select{
  width:200px;
  position:relative;
}
.remember{
  background:#eee;
  width:210px;
  position:absolute;
  top:20;
}
.remember ul{
 display:none 
}
.remember ul li{
  list-style-type:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="i_select">
     <input type="text">
    <div class="remember">
      <ul>
        <li>Teste, testando, testado...</li>
      </ul>
    </div>
  </div>
</form>

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 .