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

I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:

我正在搜索框下面创建一个建议框。我想要它,以便当用户在搜索框中有焦点,然后单击其中一个建议时,它会触发一个操作。我尝试过使用jquery:

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

My HTML structure is like this:

我的HTML结构是这样的:

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

The links are dynamically inserted inside the div that follows the input. The links do not have an href value, so they are not really links, I just want them to act like links.

链接动态插入到输入后面的div内。链接没有href值,所以它们不是真正的链接,我只是希望它们像链接一样。

When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?

当我点击其中一个链接时,搜索框失去焦点,并且,由于我拥有的CSS,链接获得可见性:隐藏。我认为搜索框在触发链接操作之前失去焦点,因此它永远不会被触发。我怎么能绕过这个?

You can see it here.

你可以在这里看到它。

Clarification: What I think is happening:

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

User clicks on link

用户点击链接
Computer thinks, The user just clicked outside of the search box

计算机认为,用户只需点击搜索框外部即可
Search box becomes blurred

搜索框变得模糊
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden

CSS看到搜索框模糊,样式说现在使建议可见性:隐藏
Now the links are no longer clickable, so the event is never triggered.

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

2 个解决方案

#1

Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.

在代码的某处,您有一个单击处理程序,可以将搜索栏置于顶部,将UI的其余部分置于视图中。当用户点击不是搜索栏的任何地方时,它会执行。您应该添加一个语句,检查被点击的元素是否是建议框中的元素。

So if this is the click handler. Also i think it's time to add an id to your suggestion div.

所以如果这是点击处理程序。此外,我认为是时候为你的建议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.
})

I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.

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

EDIT:

I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.

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

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

Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")

然后将$(“。searchbox”)。on(“blur”)更改为$(“#wrapper”)。on(“blur”)

This way you can click anywhere in the suggestion box without the blur firing.

这样,您可以单击建议框中的任意位置,而不会触发模糊。

Alternatively, the mousedown event fires before the blur event. So try this maybe

或者,mousedown事件在模糊事件之前触发。所以试试吧

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

#2

You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin

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

#1