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

Question

On my website I have a search box (text input field). When the user clicks on it and begins to enter text, a menu of links appears. The menu appears through jQuery. The following command displays the menu:

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

When the user clicks the search button, I want the menu to disappear.

The easiest way to do this is to use the following command:

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

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

Answer 1

You need to snap the click to the body to hide

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

See a working example at http://jsfiddle.net/WYbp3/4/

Answer 2

Can you be more specific, I do not understand the question. I checked your site, and when I start typing something, a modal window style menu is displayed with the results. Then, if I blur the input block, it's still there.