Javascript 焦点位于文本框中时单击不工作时的Jquery

我正在搜索框下面创建一个建议框。我希望这样，当用户在搜索框中有焦点，然后单击其中一个建议时，它会触发一个操作。我尝试在上使用jquery的

：

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

我的HTML结构如下所示：

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



链接动态插入到输入后面的
div
中。
链接没有
href
值，因此它们不是真正的链接，我只希望它们像链接一样

当我点击其中一个链接时，搜索框会失去焦点，而且由于我的css，链接会变得
可见性：隐藏
。我认为搜索框在链接动作被触发之前会失去焦点，所以它永远不会被触发。我怎样才能避开这件事

你可以看到

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

用户点击链接

电脑认为，用户只是点击了搜索框之外

搜索框变得模糊

CSS发现搜索框模糊不清，样式显示现在建议
visibility:hidden

现在链接不再可点击，因此事件永远不会触发

你可以使用一些插件。太容易了。例如，如果您使用bootstrap这样的前端框架，您可以在代码中的某个地方使用typeahead.jsplugin
，您有一个单击处理程序，它将搜索栏置于顶部，并将UI的其余部分置于视图中。当用户单击搜索栏以外的任何位置时，它就会执行。您应该添加一条语句，检查单击的元素是否是建议框中的
元素

因此，如果这是单击处理程序。此外，我认为是时候在建议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.
})

我不知道为什么没有人理解你的问题，或者为什么这个问题被否决。这是一个完全正确的问题

编辑：

我建议用另一个div包装input和suggestion div。将此包装器的属性设置为
tabindex=“-1”
，以便它可以接收模糊/聚焦事件

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

当我搜索一个词并点击“建议”时，结果正如预期的那样。我不确定该页面中有什么不起作用？尝试单击其中一个建议，一个与当前查询不同的建议对我来说工作很好-先到这里，然后在侧边栏和底部各选择一个。。。我说的是搜索框中的建议，如果你开始键入，而不是页面的其余部分。有没有办法不用插件就能做到这一点？是的。您可以不使用插件而使用。但是你必须使用ajax。只有jquery不足以自动完成搜索栏。我想你还没有理解我的问题。我已经有了这些建议，但是当我点击它们时，它们就不起作用了。我有
$（.searchbox”）。关于内容，我有“
。不过，这些建议都是通过css触发的。即使搜索框先模糊了，我如何触发链接？我使用了
mousedown
，它成功了。非常感谢你！
$(".searchbox + div").on("mousedown", "a", function() {
  $(".searchbox").val($(this).html());
});