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

}

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

}

• javascript
• jquery
• ajax
• html

• The above code is giving me the same problem I was having. When I click inside the search its not showing any results and hiding the top of my page. – dave Commented Aug 24, 2012 at 22:18
• 1 I have posted the code below please check that. – insomiac Commented Aug 24, 2012 at 22:21

2 Answers 2

In jquery You can do something like this:

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

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

​

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 patibility

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

  // 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