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/