Make a search menu disappear when the search field loses focus, but still allow user to click on links

Question

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)?

Answer 1

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/