JQuery.focusout/.click конфликт

Я работаю над проектом с поисковым полем автозаполнения. Теперь у меня есть проблема, что я хочу передать значение из найденных автокомпонентов в поле ввода, но в то же время я хочу, чтобы autocompletebox скрывался, когда поле ввода больше не сфокусировано.

Теперь у меня конфликт с обоими из них, так как щелчок на автозаполнении рассматривается как фокус и скрыть поле даже до того, как он сможет передать значение. Любые указатели или обходные пути для такого рода проблем? Здесь jsfiddle, чтобы сделать его более понятным для вас.

http://jsfiddle.net/KeGvM/

Или здесь

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>

Ответ 1

Моим решением в подобной ситуации было использование таймаута, чтобы временно приостановить действие, предпринятое в обработчике событий blur. Вот так:

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

Ответ 2

Как насчет использования

: парить

Я решил эту же проблему, используя его.

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

Ответ 3

То, как я решил это, было использовать событие mousedown вместо click, поскольку событие mousedown запускается перед событием focusout, а click не является.

Вы можете попробовать это в маленькой демонстрации ниже. Сосредоточьтесь на поле, а затем нажмите кнопку.

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>