how to hide element on blur, unless that element is clicked?
<p>I am trying to set up an auto-complete search form with jQuery.<br>
I would like to hide the search results div when the field isn't focused, however if someone tries to click a link within the results, they are unable to since it instantly becomes hidden, since the search field lost focus.<br>
Here is the code: </p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;form&gt;
  &lt;input type='search' id='search' placeholder='search' /&gt;
&lt;/form&gt;
&lt;div id='search-results' style='display:none'&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href='#'&gt;Example Result&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p><strong>JavaScript</strong></p>

<pre><code>$("#search").keyup(function() {
  query = $(this).val();
  if(query.length &gt; 2) {
    $("#search-results").html(get_search_results(query)).show();
  } else {
    $("#search-results").hide();
  }
});

$("#search").focus(function() {
  if($(this).val().length &gt; 2) {
    $("#search-results").show();
  }
}); 

$("#search").blur(function() {
  $("#search-results").hide(); //makes it impossible to click results
});
</code></pre>

<p>How can I accomplish hiding the results when not in use, but still have them be clickable?</p>
