当搜索字段失去焦点时,使搜索菜单消失,但仍然允许用户单击链接

发布于 2024-10-20 12:14:20 字数 505 浏览 6 评论 0原文

在我的网站我有一个搜索框(文本输入字段)。 当用户单击它并开始输入文本时,会出现一个链接菜单。 菜单通过 JQuery 显示 - 以下命令使菜单出现:

".focus(function() {
    $("#instant_search_wrapper").show();
}); "

当用户单击搜索框时,我希望菜单消失。

执行此操作的最简单方法是使用以下命令:

".blur(function() {
    $("#instant_search_wrapper").hide();
});" 

但是,如果我这样做,那么当用户单击菜单中的链接时,文本输入字段将失去焦点,因此菜单会在用户被选中之前消失到选择页面。 如何才能使菜单在搜索字段失去焦点时消失(但如果用户在搜索字段失去焦点之前单击链接,他/她仍然能够被带到该链接)?

On my website I have a search box (text input field).
When the user clicks on it and starts typing text a menu of links appears.
The menu appears via JQuery - The following command makes the menu appear:

".focus(function() {
    $("#instant_search_wrapper").show();
}); "

When the user clicks off the search box, I would like the menu to disappear.

The easiest way of doing this would be to be use the following command:

".blur(function() {
    $("#instant_search_wrapper").hide();
});" 

However, if I do this, then when the user clicks on a link in the menu, the text input field loses focus and so the menu disappears before the user is taken to the select page.
How can I make it so the menu disappears when the search field loses focus, (but if the user clicks on a link before the search field loses focus, s/he is still able to be taken to the link)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

蛮可爱 2024-10-27 12:14:20

您需要将点击绑定到正文以隐藏

$(document).click(function() {
      $("#instant_search_wrapper").hide();

});

请参阅 http://jsfiddle.net/WYbp3/4/ 的工作示例

You need to bind the click to body for hiding

$(document).click(function() {
      $("#instant_search_wrapper").hide();

});

See Working example at http://jsfiddle.net/WYbp3/4/

毁我热情 2024-10-27 12:14:20

能具体点吗,我没看懂这个问题。我检查了您的网站,当我开始输入内容时,会显示带有结果的模式框样式菜单。然后,如果我模糊输入,该框仍然存在。

Can you be more specific, I don't understand the question. I checked your site and when I start typing something, a modal box style menu with the results is showed. Then if I blur the input the box still there.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文