Hide element when clicking outside it

Question

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

http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — AmmarCSE, May 18 '15 at 20:54
@ A. Wolff - edited my question to show my implementation of attempting to use f01's code. No Luck. It stops the jquery output DIV from appearing at all when I begin to type in the search box. — Sour Jack, May 18 '15 at 21:38

ffffff01 · Answer 1 · 2015-05-18T21:07:25.560

1

you can do the following:

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

Fiddle

edited May 18 '15 at 21:07

answered May 18 '15 at 20:56

ffffff01

5,068
11
52
61

`e.target` could be a child of `#output`. This would handle it: `if(!$(e.target).closest('#output').length)` – A. Wolff May 18 '15 at 20:57
f01 - Tried this. Unfortunately when I try the code it doesn't allow the DIV to show at all so it kills the functionality of the jquery search. I implemented the code like this: – Sour Jack May 18 '15 at 21:29
@vihan - not sure what that means. Are you saying Im just asking for an answer without wanting to learn or study the solution? If you look at my other questions i've asked, in cases where I've found an answer on my own to my problem before others could help me I ALWAYS post that solution so that others can use it as well. In this case, I'm NOT an expert with Java by any means and especially not jquery so any and all help is truly appreciated. No need to be rude. – Sour Jack May 18 '15 at 23:20

A. Wolff · Answer 2 · 2015-05-18T21:10:30.817

0

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();
});

edited May 18 '15 at 21:10

answered May 18 '15 at 21:01

A. Wolff

74,033
9
94
155

@ A. Wolf. Not working for me at all. It didn't break search functionality but the DIV is still visible when I search outside of it. – Sour Jack May 18 '15 at 21:31
Wow, sorry wolff, totally didn't understand how to implement that. I was trying to tack the code you gave me into its own Java script not really realizing it was an extension of my current code. Wow, feel like a dummy. Anyway thank you for the response. Anyway, the code basically does work, however after the DIV has been hidden, if I try to do another search it won't allow me to do so without refreshing the page. It also only allows me to type one letter into my search bar. – – Sour Jack May 18 '15 at 23:46

score 0 · Answer 3 · answered May 19 '15 at 01:55

@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

Hide element when clicking outside it

3 Answers3