当焦点位于文本框中时，Jquery不起作用

Question

我在搜索框下方创建了一个建议框。我需要它，以便当用户在搜索框中有焦点时，然后单击其中一个建议，就会触发一个操作。我已经使用jQuery的on尝试：

$(".searchbox + div").on("click", "a", function() { 
    $(".searchbox").val($(this).html()); 
}); 

我的HTML结构是这样的：

<input type="search" placeholder="Search" class="searchbox"> 
<div></div> 

的链接动态插入下面的输入div内。 链接没有href价值，所以它们不是真正的链接，我只是希望它们像链接一样行事。

当我点击其中一个链接，搜索框失去焦点，并且，由于我有CSS，链接得到visibility:hidden。我认为搜索框在链接动作被触发之前失去了焦点，所以它永远不会被触发。我怎么能解决这个问题？您可以看到它here。

澄清：我认为正在发生的事情：

1. 用户点击链接

2. 电脑认为，刚刚点击搜索框

3. 搜索框变成外部用户模糊

4. CSS看到搜索框是模式，风格说现在提出建议visibility:hidden

5. 现在链接不再可点击，所以事件从未触发。

Answer 1

某处在你的代码中有带来的搜索栏的顶部和UI的其余部分进入视野点击处理程序。当用户点击不是搜索栏的任何地方时，它会执行。您应该添加一个声明，检查点击的元素是否为建议框中的<a>元素。

所以，如果这是点击处理程序。此外，我认为是时候向您的建议div添加一个id。

$(document).click(function(e){ 
    var $clicked = $(e.target); 
    if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0) 
     $(".searchbox").val($(this).html()); 
    else if(click was outside searchbar) 
     //move searchbar up and show UI 
    else 
     //click happened inside searchbar, do nothing. 
}) 

我不确定为什么没有人理解你的问题，或者为什么这个问题是downvoted。这是一个完全有效的问题。

编辑：

我建议用另一个div包装输入和建议div。为此封装器提供tabindex="-1"的属性，以便它可以接收模糊/焦点事件。

<div id="wrapper"> 
<input type="search" placeholder="Search" class="searchbox"> 
<div></div> 
</div> 

然后改变你的$(".searchbox").on("blur")到$("#wrapper").on("blur")

这样你可以在建议框中的任意位置单击不模糊射击。

或者，mousedown事件在blur事件之前触发。所以试试这也许

$(".searchbox + div").on("mousedown", "a", function() { 
    $(".searchbox").val($(this).html()); 
}); 

Answer 2

你可以使用一些插件。它太简单了。例如，如果你与像引导任何正面框架的工作，你可以使用typeahead.js插件