Close a div when clicked anywhere on page
ajax, html, javascript, jquery
Solution
In jquery You can do something like this:
$(document).click(function(){
$('.searchresults').hide();
});
$('.searchresults').click(function(e){
e.stopPropagation();
});
Problem
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(); } ```