jQuery .focusout / .click冲突 [英] jQuery .focusout / .click conflict

问题描述

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

I'm working on a project with an autocomplete searchbox. Now I have the issue that I want to pass the value from the found autocompleteresults to the input box, but on the same time, I want the autocompletebox to hide when the inputfield is not more focused.

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

Now I have a conflict going on with both of them since the click on the autocompletebox is seen as focusout and hide the box even before it can pass the value. Any pointers or workarounds for this kind of issue? Here a jsfiddle to make it more clear to you.

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>​

推荐答案

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

My solution in the similar situation was using timeout to temporarily hold off the action taken in blur event handler. Like this:

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

这篇关于jQuery .focusout / .click冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！