Click outside > hide()
<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>
