jQuery - 如何隐藏下拉搜索结果列表？

Question

我正在尝试做一个类似 facebook 中的搜索用户栏 （它包含一个输入区域和一个动态下拉结果列表）

但是当我点击另一个区域时，我在隐藏下拉结果列表列表时遇到了问题。

html 代码是这样的：

<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>

以及这附近的jquery代码：

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

但它不会触发display_selected_user_info();

主要问题是#search_container在$('#search_result_list').children('li')点击激活之前触发了focusout，使得li在点击li功能激活之前就消失了。

---

注意：我放了一个例子，你可以测试here。

Answer 1

我终于知道该怎么做了。 （经过大量搜索）

基本上我可以使用文档点击事件和 event.trigger 来检查我是否点击了我的结果列表。

// 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();
  }
});

我已经把我的例子的完整版本here

Answer 2

我找到了解决此问题的简单方法。您可以在结果列表隐藏之前引入延迟，以便单击事件有足够的时间触发。

$('#search_imput').blur(function() {
    setTimeout(function(){
        $('#search_result_list').hide();
    }, 100);
});

查看更新版本：http://jsfiddle.net/5FRar/1/

Answer 3

你的列表是动态生成的吗？ 如果是，则尝试使用实时函数来检测添加到 dom 的新 li，并且 dis 的 jquery 是：

$('#search_result_list li').live('click', function(){
  display_selected_user_info();
});

Answer 4

已编辑

$('#search_imput').click(function(){
  //update_search_result_list();
  $(this).find('#search_result_list').children('li').show();       
});

$('#search_container').unbind().bind('blur',function(){
  $(this).find('#search_result_list').children('li').hide();
});

$('#search_result_list').children('li').die().live('click',function(){
  display_selected_user_info();
});