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')点击激活之前被触发，使li项目在点击li功能被激活之前消失。 / p>

注意：我已经举了一个例子，你可以测试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

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

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

请参阅更新版本：http://jsfiddle.net/5FRar/1/

Answer 3

<强> EDITED

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

Answer 4

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

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

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

4 个答案: