单击页面上任何位置时关闭div

Question

I have a search box that selects users and sends them into a div on my page which obviously opens with the script. But I would like the box to close if the user clicks outside of the div anywhere on my sites page. I've played around with a few ideas but haven't got what I'm looking for.

HTML

<input type="text" id="search_txt" placeholder="Search for friends" class="blog_input_field" onKeyUp="dosearch(document.getElementById('search_txt').value,'ajaxsearch_results');"><hr>
<div class="searchresults" id="ajaxsearch_results">

REQUEST FUNCTION

function dosearch(text,containerid){
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();

    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            //alert(xmlhttp.responseText);
            document.getElementById(containerid).innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","include/search.people.php?t="+text,true);
    xmlhttp.send();

}

Answer 1

In jquery You can do something like this:

$(document).click(function(){
   $('.searchresults').hide();   
});

$('.searchresults').click(function(e){
    e.stopPropagation();
});

​

Answer 2

This can be done with raw JS, no need for Jquery. You hook the onmousedown or on click, and take advantage of the fact that JS events bubble up, eventually (unless blocked) to the document. So:

document.onmousedown (or onclick) = function (e) {

  if (!e) e = window.event; // for browser compatibility

  target = (e.target ) ? e.target : e.srcElement; // again for browser compat..

  // note - could be child of div, too: see fine print    
  if (e.target.id != "divIDgoesHere")
      document.getElementById('divIDgoesHere').style.display = "none" ;
      // or other hide
}

The fine print:

• if you click inside the div, the target might be some inner child of the div. In which case, you can iterate over parentNode till you get to the search div, and ignore those requests.

• you could also remove the div altogether (div.parentNode.removeChild(div)).

• you'll need to tweak the code some. Nothing major.

Hope this helps

TG