Conflict between focusout and click

Question

Conflict between focusout and click

Navigation

#1 by (1 votes)

1

I'm creating a form. In the text field I want to put on it a self-complete screen. I manually created any structure that works as expected

When you type, you will see options that the user can click to complete the

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

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

Follow 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: link

jquery

asked by anonymous 29.07.2016 / 00:53

1 answer

How to download WebView files to the SDCard if available WebView does not open the requested link

score 1 · Accepted Answer

Try to use, instead of "click" , "mousedown" :

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

$(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><divclass="i_select">
     <input type="text">
    <div class="remember">
      <ul>
        <li>Teste, testando, testado...</li>
      </ul>
    </div>
  </div>
</form>