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)?
You need to bind the click to body for hiding
$(document).click(function() {
$("#instant_search_wrapper").hide();
});