title: Click outside > hide()
body: <p>I have this jquery code:</p>
  
  <pre><code>$(document).ready(function(){
  //global vars
  var searchBoxes = $(".box");
  var searchBox = $(".box");
  var searchBoxDefault = "Search...";
  
  searchBoxes.focus(function(e){
      $(this).addClass("active");
      $('#searchoptions').show();
  });
  searchBoxes.blur(function(e){
      $(this).removeClass("active");
  });
  
  searchBox.focus(function(){
      if($(this).attr("value") == searchBoxDefault) $(this).attr("value", "");
  });
  searchBox.blur(function(){
      if($(this).attr("value") == "") $(this).attr("value", searchBoxDefault);
  }); });
  </code></pre>
  
  <p>and html code:</p>
  
  <pre><code>&lt;div id="search" class="right"&gt;
    &lt;form method="post" class="clearfix"&gt;
      &lt;input class="box left" type="text" value="Search..." /&gt;
      &lt;input class="button right" type="submit" value="" /&gt;
    &lt;/form&gt;
    &lt;div id="searchoptions"&gt;
      Options:&lt;br /&gt;&lt;input checked="checked" type="radio"&gt; Option1&lt;/label&gt;
      &lt;input type="radio"&gt; Option2&lt;/label&gt;
      &lt;input type="radio"&gt; Option3&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The question is: How can I make when I click outside of #search id, to hide #searchoptions?</p>
  
  <p>I tried with body click, but have bugs...and does not run perfectly...</p>