Question

I have a search input (#search_input) which expands when being focused. Additional search options pop up that allow me to select specific search options.

The input should contract after it blurs, but only when the blur was triggered outside of the form.

http://jsfiddle.net/zMp9S/

Right now I’m using the following which contracts the search input too early even when I’m just choosing a an option from the search option menu:

$(function() {
    $("#search_input").focus(function(){
        $("#search_input").stop().animate({width: 310}, 200);
        $("#search_options").show();
    })
    $("#search_input").blur(function(){
        $("#search_input").stop().animate({width: 100}, 200);
        $("#search_options").hide();
    })        
});​

Putting focus / blur events on the form doesn’t work.

How can I tell jQuery to only contract #search_input when the blur happens outside the form #search_form ?

Answer 1

You must bind to the click event of the window, otherwise you’ll be unable to detect if the user is losing the focus of a div (that actually does not have a focus/blur event!)

  $(window).click(function(e) {
        if (e.target.id != 'search_options' && e.target.parentNode.id != 'search_options' && e.target.id != 'search_input') {
            $("#search_input").stop().animate({
                width: 100
            }, 200);
            $("#search_options").hide();
        }
    });

http://jsfiddle.net/zMp9S/9/