5

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

Anders
  • 8,307
  • 9
  • 56
  • 88
big_smile
  • 1,487
  • 4
  • 26
  • 59

2 Answers2

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/

Hussein
  • 42,480
  • 25
  • 113
  • 143
0

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.

Jepser Bernardino
  • 1,331
  • 1
  • 12
  • 22