title: how to hide a specific div when clicking anywhere on screen
body: <p>I have a search result div which have contains search result list items according to user's search. but i want to hide that result div when user click any where on the screen.</p>
  
  <p><strong>here is my search div code:</strong></p>
  
  <pre><code>&lt;div id="user_search"&gt;
      &lt;div class="inpt-head-place" style="width:9em;"&gt;
          &lt;?php echo form_open( '',[ 'class'=&gt;' navbar-left navbar-change','id'=&gt;'search_form']) ?&gt;
          &lt;?php echo form_input([ 'type'=&gt;'text','class'=&gt;'form-control form-media search_user_bar','placeholder'=&gt;'Search Here','name'=&gt;'search']); ?&gt;
      &lt;div id="search_result" class="search_result"&gt; &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="inpt-head-place" style="width: 20px;"&gt;
          &lt;button class="btn btn-default btn-resize" type="submit" name="submit" id="submit_here"&gt; &lt;i class="fa fa-search"&gt;&lt;/i&gt; &lt;/button&gt;
          &lt;?php echo form_close(); ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And here is a Snap of search Bar with their results:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/V3fHb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V3fHb.png" alt="And here is a Snap of search Bar with their results"></a>               </p>
  
  <p>Kindly suggest me.. Thanks</p>