title: jQuery - How to hide drop down search result list?
body: <p>I'm trying to do a search user bar like the one in facebook
  (it consists in a input area and a dynamic drop down result list)</p>
  
  <p>but I'm having problems in hiding the drop down result list list when I click in another area.</p>
  
  <p>the html code is something like this:</p>
  
  <pre><code>&lt;div id="search_container"&gt;
    &lt;input id="search_imput" type="text" autocomplete="off"&gt;
    &lt;ul id="search_result_list"&gt;
      &lt;li&gt;result 1&lt;/li&gt;
      &lt;li&gt;result 2&lt;/li&gt;
      &lt;li&gt;result 3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the jquery code near this:</p>
  
  <pre><code>$('#search_imput').click(function(){
    //update_search_result_list();
    $('#search_result_list').show();      
  });
  
  $('#search_container').focusout(function(){
    $('#search_result_list').hide();
  });
  
  $('#search_result_list').children('li').click(function(){
    //display_selected_user_info();
    alert(($(this).text());
  });
  </code></pre>
  
  <p>but it doesn't trigger the <code>display_selected_user_info();</code></p>
  
  <p>The main problem is that the <code>#search_container</code> focusout is triggered before the <code>$('#search_result_list').children('li')</code> click is activated, making the <code>li</code> item disappear before the click <code>li</code> function is activated.</p>
  
  <hr>
  
  <p>Note: I've placed a example were u can test <a href="http://jsfiddle.net/5FRar/" rel="nofollow noreferrer">here</a>.</p>