当搜索框失去焦点时隐藏搜索菜单，但仍允许用户点击链接。

Question

我网站上有一个搜索框（文本输入框）。 当用户点击并开始输入文本时，会出现链接菜单。 该菜单通过JQuery出现 - 以下命令使菜单出现：

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

当用户点击搜索框外部时，我希望菜单能够消失。

最简单的方法是使用以下命令：

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

然而，如果我这样做，那么当用户点击菜单中的链接时，文本输入框将失去焦点，因此在用户进入选择页面之前，菜单就会消失。 我该如何使菜单在搜索字段失去焦点时消失，但如果用户在搜索字段失去焦点之前点击链接，则仍然能够访问链接？

- big_smile

---

我也有同样的问题，希望你能尽快得到答案。=) - McHerbie

Answer 1

您需要将点击事件绑定到body上以进行隐藏。

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

});

请参考以下链接查看示例：http://jsfiddle.net/WYbp3/4/

- Hussein

---

那个答案已经有6年了，它仍然是唯一的解决方案吗？ - ZebThan

Answer 2

你能具体一点吗？我不太明白这个问题。我查看了你的网站，当我开始输入内容时，会出现一个模态框式的菜单，显示搜索结果。然后如果我取消输入焦点，该框仍然存在。

- Jepser Bernardino