Question

Below is the function which is called to show the autocomplete in a search box…I want the auto complete to disappear onBlur or click outside the search box…please tell me what should be added in this function to make the autocomplete drop down disappear when clicked outside?

function hideLoader(){
        $('#sub_cont').fadeIn(100);
        $('.search-background').fadeOut(100);
    };

    $('#search').keyup(function(e) {
      if(e.keyCode == 13) {
        showLoader();
        $('#sub_cont').fadeIn(100);
        $("#content #sub_cont").load("../ajax/search.php?val=" + $("#search").val(), hideLoader());
        }
      });

//Fading out the div when the text box is empty
    String.prototype.trim = function() {
    return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        }

    $(".searcher").keyup(function(){

        if($('.searcher').val().trim().length > 0) {
            // is not empty
            showLoader();
            $('#sub_cont').fadeIn(100);
            $("#content #sub_cont").load("../ajax/search.php?val=" + $("#search").val(), hideLoader());
        } else {
            // is empty
            $('#sub_cont').fadeOut(100);
        }

    });

Answer 1

You could try binding the click event to the document. Something like this:

$(document).bind('click', function (event) {
    // Check if we have not clicked on the search box
    if (!($(event.target).parents().andSelf().is('.searcher'))) {
        // Hide/collapse your search box, autocomplete or whatever you need to do
    }
});