jQuery - 如何隱藏下拉搜索結果列表？

我想做像在Facebook的（它包括在輸入區域和一個動態下拉結果列表）jQuery - 如何隱藏下拉搜索結果列表？

但我有在隱藏下拉結果列表的問題搜索用戶條當我點擊另一個區域時列出。

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_result_list').children('li')點擊被激活之前，#search_container聚焦被觸發，使得li項目消失b在點擊li功能被激活之前。

注：我已經舉了一個例子，你可以測試here。

來源

2010-08-28 Seeker

的完整版本我很吃驚菜單甚至顯示 - 搜索結果是一個* *的兄弟姐妹，沒有一個孩子到輸入。 – 2010-08-28 16:06:42

true它應該只是（'#search_result_list'）而不是$（this）.children（'li'）...已經修復它。我的真實代碼稍微複雜一點，但這個想法是一樣的。 – Seeker 2010-08-28 17:28:38

我終於發現了怎麼辦。（經過大量搜索）

基本上我可以使用文檔點擊事件和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

來源

2010-09-07 10:50:11 Seeker

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

來源

2010-08-28 16:03:50 Val

已經嘗試模糊，但它不起作用。注意：search_result_list在search_container之外可視化浮動（如果不是，當我單擊search_result_list中的元素li時，jQuery沒有觸發focusout） – Seeker 2010-08-28 16:20:42

嘗試編輯的腳本...順便說一句，你知道列表只顯示當你點擊而不是當你按下按鍵時 – Val 2010-08-28 16:41:56

我的實際代碼也使用按鍵來更新搜索結果列表。在這個例子中，我只是假設我有相同的結果列表（只是爲了更簡單）。 – Seeker 2010-08-28 16:57:54

是動態生成的烏爾名單？如果是書房試圖肝功能檢測新麗添加到DOM和DIS的jQuery是：

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

來源

2010-08-28 16:04:00

是的，我做這樣的事情，那是我的update_search_result_list（）; 注意：我只是評論它，因爲只是爲了簡單的問題（我假設列表現在是靜態的）和display_selected_user_info（）將進入另一個頁面，顯示我在列表中選擇的用戶的信息。 – Seeker 2010-08-28 16:27:04

ur？den？dis？你是通過短信回答的嗎？我的眼睛剛剛流血了一點 – 2010-08-30 13:00:49

我發現一個簡單的工作，圍繞這個問題。您可以在結果列表隱藏之前引入延遲，以便點擊事件有足夠的時間觸發。

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

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

來源

2010-09-07 07:09:22

我已經如果它的電腦速度很慢，你需要增加時間，否則它會失敗，它有點煩人，但是你可以發佈信息，我最終找出了答案。經過大量的搜索。 – Seeker 2010-09-07 10:52:16

jQuery - 如何隱藏下拉搜索結果列表？

回答

相關問題