jQuery .focusout/.click Konflikt

Question

Ich arbeite an einem Projekt mit einem Autocomplete-Suchfeld. Jetzt habe ich das Problem, dass ich den Wert aus den gefundenen Autocompleteresults an das Eingabefeld übergeben möchte, aber gleichzeitig möchte ich die Autocompletebox ausblenden, wenn das Eingabefeld nicht mehr fokussiert ist.

Jetzt habe ich einen Konflikt mit beiden von ihnen, da der Klick auf die Autocompletebox als Focusout gesehen wird und das Feld ausblenden, noch bevor es den Wert übergeben kann. Irgendwelche Zeiger oder Workarounds für diese Art von Problem? Hier ein Spiel, um es dir klarer zu machen.

http://jsfiddle.net/KeGvM/

Oder hier

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

Meine Lösung in ähnlicher Situation Timeout wurde mit der Aktion in blur Ereignishandler getroffen, um abwehren. Wie folgt aus:

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

Answer 2

Wie wäre es

mit: schweben

ich gleiche Problem mit ihm gelöst.

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

Answer 3

So wie ich dies die mousedown Ereignis statt click gelöst wurde mit, wie die mousedown Ereignis vor dem Ereignis focusout ausgelöst wird, während click nicht ist.

Sie können es in der kleinen Demo unten ausprobieren. Konzentriere dich auf das Feld und klicke dann auf den Button.

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>

Wie Sie die Ausgabe in der folgenden Reihenfolge sehen:

1. Maus nach unten
2. Fokus heraus
3. Click

Der einzige Nachteil dieser Lösung ist, dass sie nicht darauf wartet, dass der Benutzer ihre Maustaste loslässt, sondern dass Sie selbst entscheiden können, ob das ein Problem ist.