Question

So I am building an input field with an auto-suggest box that suggests content based on the user’s partial input into the field. Kinda like the tags box on stack. The auto-suggest box is absolutely positioned directly below the input field and only appears once the user begins to type text.

I want to make the box disappear when the input field is blurred, that is, when the user clicks anywhere else on the site. Normally, I would just use jquery’s blur() function to hide the auto-suggest box. The problem is that if I do it this way, the user won’t be able to select anything from the auto-suggest box because that would blur the input field and hide the auto-suggest box. I need to find a way to hide the auto suggest box if the user clicks anywhere except for the input field or the auto suggest box. Any ideas how I could set that up using jquery?

Imagine it is setup something like this:

<div id="auto_suggest">
<ul>
<li>Jane</li>
<li>john</li>
</ul>
</div>

<input type="text">

Answer 1

Use a timeout.

$("input, #auto_suggest, #auto_suggest a").blur(function() {
   $('#auto_suggest').addClass('hiding');
    setTimeout(function(){
        $('#auto_suggest.hiding').hide();
    },1000);
}).focus(function() {
   $('#auto_suggest').removeClass('hiding').show();
});

$('#auto_suggest, #auto_suggest a').focus(function() {
   $('#auto_suggest').removeClass('hiding').show();
});​

Updated to work well with tabs or clicks:

http://jsfiddle.net/iambriansreed/vUeeT/