Conflict between focusout and click

Question

I am creating a form. In the text field I want to put an auto-complete screen on it. I manually created the whole structure that works as expected

When typing will be presented options that the user can click to auto-complete the field

The problem is that there is a conflict between the events and focusout and click

Apparently the event of focusout is executed faster than click, making it impossible for me to click on the suggestion before it is hidden

Follows the code:

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();
  });

});

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

Answer 1

Try using instead of "click", "mousedown":

And something else instead of .parent().parent().parent(), can use .closest(), past the class (or id) of the element you want to limit the hierarchy advance:

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