34

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

现在我和他们两个都发生了冲突，因为点击自动完成框被视为焦点，甚至在它可以传递值之前隐藏框。此类问题的任何指示或解决方法？这里有一个 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>​
4

3 回答 3

36

我解决这个问题的方法是使用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>

如您所见，输出按以下顺序排列：

  1. 鼠标向下
  2. 专注
  3. 点击

这是最稳定的解决方案，无需使用任何解决方法，如超时。它也不依赖于 jQuery。唯一值得注意的是mousedown不等待用户释放他们的鼠标按钮，但就用户体验而言，这并不是真正关心的问题。

于 2017-12-22T16:50:50.493 回答
34

怎么用

：徘徊

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

$('className').on('focusout', function(e) {
    if($('.suggestLi' + ':hover').length) {
        return;
    }
    $('.suggestList').empty();
});
于 2014-11-21T03:03:39.733 回答
31

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

$('#search_field').focusout(function() {
    window.setTimeout(function() { $('#a_c').hide() }, 100);
});
于 2012-12-20T21:09:39.387 回答