Question

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)

but I’m having problems in hiding the drop down result list list when I click in another area.

the html code is something like this:

<div id="search_container">
  <input id="search_imput" type="text" autocomplete="off">
  <ul id="search_result_list">
    <li>result 1</li>
    <li>result 2</li>
    <li>result 3</li>
  </ul>
</div>

and the jquery code near this:

$('#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());
});

but it doesn’t trigger the display_selected_user_info();

The main problem is that the #search_container focusout is triggered before the $('#search_result_list').children('li') click is activated, making the li item disappear before the click li function is activated.

---

Note: I’ve placed a example were u can test here.

Answer 1

I finally find out how to do. (after a lot of search)

Basically i can use the document click event and the event.trigger to check if i click or not in my result list.

// remove the $('#search_container').focusout and use this one:
$(document).unbind('click');
$(document).click(function(event){
  if($(event.target).closest('#search_container').length == 0) {
    $('#search_result_list').hide();
  }
});

I’ve put the complete version of my example here