title: Hide search input field and search results when user clicks outside of them
body: <p>How to hide both the input field and the search results box when user clicks outside of them?</p>
  
  <p>Currently if you hover your mouse over <code>#search-btn</code> both <code>#search-container</code> and <code>#search-results</code> will appear. If you click anywhere except on <code>#search-container</code> both will disappear.</p>
  
  <p>I want so that I can click on <code>#search-results</code> without both of them disappearing.</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/emils/d2sn7q6L/" rel="noreferrer">https://jsfiddle.net/emils/d2sn7q6L/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="search-container"&gt;
    &lt;form id="search-form"&gt;
      &lt;input id="search" type="search"&gt;
    &lt;/form&gt;
  &lt;/div&gt; &lt;!-- End search-box --&gt;
  
  &lt;a id="search-btn" class="search-icon" href="#"&gt;search&lt;/a&gt;
  
  &lt;div id="search-results"&gt;&lt;/div&gt; &lt;!-- End search-results --&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>var searchInput = $("#search-container");
  var searchResults = $("#search-results");
  
  var showSearchInput = function() {
    searchInput.show();
    searchResults.show();
    if(searchInput.is(":visible")) {
      $("#search").focus();
    }
  };
  $("#search-btn").hover(showSearchInput);
  
  searchInput.focusout(function(e) {
    searchInput.hide();
    searchResults.hide();
  });
  </code></pre>