CODEWITHSUNDEEP
javascriptjquerycss
Sour Jack
Sour Jack

Reputation: 71

Hide element when clicking outside it

I've searched through all the current answers for others who have asked this question and nothing is working for me after trying numerous sample code, so I figured it was time to break down and ask. Forgive me if this is repeating of a question but since I've not had success with other variants of this I thought it would be OK.

I'm using Jquery to bring up a DIV containing a list items in my database. I'd like for that DIV to disappear when I click outside of it. This is the code I used. 

 <script type="text/javascript" src="https://ajax.googleapis.com    /ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript"> 
        function searchq(){
            var searchTxt = $("input[name='search']").val();
            $.post("live_search.php", {searchVal: searchTxt},     function(output) {
                $("#output").html(output);      
            });
        }
        </script>
        <script type="text/javascript"> 
        $("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});
        </script> 
        ///////////
        MY ATTEMPT TO HIDE THE DIV
       <script type="text/javascript">
      $(document).click(function(e) { 
      if(!$(e.target).closest('#output').length){
      $("#output").hide();  
      }
      });


    </script>

The DIV i'm using to show the data is named output, as shown in the code. Any ideas on how I can get the output DIV to disappear when clicking outside of the output DIV?

Kind Regards Sour Jack

Upvotes: 0

Views: 102

Answers (3)

Sour Jack
Sour Jack

Reputation: 71

@f01 and @A. Wolff

Thank you guys for your answers. My final solution to the problem seems to work with the following code, which was provided by @f01 and I just played around with it a bit to get it to accomplish what I needed. A. Wolff, your answer was great too but a little over my head as my Javascript abilities are non existant so I don't really have the know how to take it to the next step. Anyway, to anyone else with this problem, here is the code to hide a jquery search DIV when you click outside of the search area. If you want to show the DIV in order to do another search, this code will toggle it back on as well. Explanation below the code. 

    <script type="text/javascript" src="https://ajax.googleapis.com    /ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript"> 
        function searchq(){
            $("#output").show(); 
            var searchTxt = $("input[name='search']").val();
            $.post("live_search.php", {searchVal: searchTxt},     function(output) {
                $("#output").html(output);
                $(document).click(function(e) { 
                 if(!$(e.target).closest('#output').length){
                 $("#output").hide(); 
                    }
                    });     
                    });
              }
        </script>

Note - the code which hides the DIV is this piece (provided by f01)

$(document).click(function(e) { 
if(!$(e.target).closest('#output').length){
$("#output").hide();  
}
});

To toggle the DIV back into view if you want to do another search, I simply add this code to the top of searchq function.

$("#output").show();

Thanks again!

Sour Jack

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

Binding click event to document/body is a solution but i prefer to use the blur event, using following snippet:

$.post("live_search.php", {
    searchVal: searchTxt
}, function (output) {
    $("#output").attr('tabindex', -1)
        .css('outline', 0)
        .one('blur', function () {
            $(this).hide();
        })
        .html(output)
        .focus();
});

Upvotes: 0

ffffff01
ffffff01

Reputation: 5248

you can do the following:

$(document).click(function(e) { 
   if(!$(e.target).closest('#output').length){
      $("#output").hide();  
   }
});

Fiddle

Upvotes: 1

Related Questions