Question

我正在搜索框下方创建一个建议框。我想要它，以便当用户将焦点放在搜索框中，然后单击其中一个建议时，它会触发一个操作。我尝试过使用jquery＆＃39; 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。

澄清：我认为发生了什么：

用户点击链接
计算机认为，用户只需点击搜索框外
搜索框变得模糊
CSS看到搜索框模糊，样式说现在提出建议visibility:hidden
现在链接不再可点击，因此永远不会触发该事件。

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.
})

我不确定为什么没有人理解你的问题，或者为什么这个问题被低估了。这是一个非常有效的问题。

编辑：

我建议用另一个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

您可以使用一些插件。它太容易了。例如，如果您使用任何前端框架（如bootstrap），则可以使用 typeahead.js 插件

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

2 个答案: