Question

我正在开发一个带有自动填充搜索框的项目。现在我有一个问题，我想将找到的自动完成结果中的值传递给输入框，但同时，我希望自动完成框在输入字段不是更集中时隐藏。

现在我和他们两个都发生冲突，因为自动完成框上的点击被视为焦点并且甚至在它可以传递值之前隐藏框。针对此类问题的任何指针或解决方法？这里有一个jsfiddle，让你更清楚。

或者

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

我在类似情况下的解决方案是使用超时暂时阻止在blur事件处理程序中执行的操作。像这样：

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

Answer 2

如何使用

：悬停

我用它解决了同样的问题。

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

Answer 3

我解决这个问题的方法是使用ERROR: Duplicate substitution definition name: "this".事件代替mousedown。 click事件在mousedown事件之前触发始终，而focusout事件未触发。{/ p>

您可以在下面的小演示中试一试。专注于该字段，然后单击按钮。

＆＃13;

click

＆＃13;

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'));

＆＃13;

如您所见，输出的顺序如下：

鼠标按下
专注
点击

这是最稳定的解决方案，不使用超时等任何变通方法。它也不依赖于jQuery。唯一值得注意的是<input id="field"> <button id="btn">Try it</button>并不等待用户释放他们的鼠标按钮，而是在用户体验方面并不是真正关注的问题。

jQuery .focusout / .click冲突

3 个答案: