jQuery - How to hide drop down search result list?
<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">here</a>.</p>
