javascript - trigger - onfocus blur jquery

jQuery.focusout/.click conflict

Question

Estoy trabajando en un proyecto con un cuadro de búsqueda autocompletado. Ahora tengo el problema de que deseo pasar el valor del autocompletador que se encuentra al cuadro de entrada, pero al mismo tiempo, quiero que la caja de autocompletado se oculte cuando el campo de entrada no esté más enfocado.

Ahora tengo un conflicto con ambos ya que el clic en el autocompletebox se ve como enfoque y oculta el cuadro incluso antes de que pueda pasar el valor. ¿Algún indicador o soluciones para este tipo de problema? Aquí un jsfiddle para que sea más claro para usted.

http://jsfiddle.net/KeGvM/

O aquí

CSS :

#a_c {display:none;}​

JS :

$(''#search_field'').focusout(function() {
    $(''#a_c'').hide(); // IF I DELETE THIS IT WORKS
});

$(''#search_field'').focusin(function() {
    $(''#a_c'').show();
});

$(''#a_c a'').click(function() {
    $(''#search_field'').val('''');
    var value = $(this).text();
    var input = $(''#search_field'');
    input.val(input.val() + value);
    $(''#a_c'').hide();
    return false;
});​

HTML :

<input autocomplete="off" onkeyup="searchFor(this.value);" name="search" id="search_field" class="bold" type="text" placeholder="Search...">
<div id="a_c"><a href="">hello world</a></div>​

Answer 1

¿Qué hay de usar

:flotar

Resolví el mismo problema usándolo.

$(''className'').on(''focusout'', function(e) {
    if($(''.suggestLi'' + '':hover'').length) {
        return;
    }
    $(''.suggestList'').empty();
});

Answer 2

La forma en que resolví esto fue usando el evento mousedown lugar de click . El evento mousedown siempre se activa antes que el evento focusout mientras que el click no lo es.

Puedes probarlo en la pequeña demo a continuación. Enfócate en el campo y luego haz clic en el botón.

const field = document.getElementById(''field'');
const btn = document.getElementById(''btn'');

btn.addEventListener(''click'', () => console.log(''Click''));
btn.addEventListener(''mousedown'', () => console.log(''Mouse down''));
field.addEventListener(''focusout'', () => console.log(''Focus out''));

<input id="field">
<button id="btn">Try it</button>

Como puede ver, la salida está en el siguiente orden:

1. Ratón hacia abajo
2. Enfocar hacia fuera
3. Hacer clic

Esta es la solución más estable sin utilizar hacks de solución temporal como los tiempos de espera. Tampoco depende de jQuery. Lo único que vale la pena tener en cuenta es que la mousedown no espera a que el usuario suelte el botón del mouse, sino que, en términos de experiencia de usuario, no es realmente una preocupación aquí.

Answer 3

Mi solución en una situación similar fue usar el tiempo de espera para suspender temporalmente la acción realizada en el controlador de eventos de blur . Me gusta esto:

$(''#search_field'').focusout(function() {
    window.setTimeout(function() { $(''#a_c'').hide() }, 100);
});