通過單擊關閉關閉一個實況搜索框它

Question

我認爲最好的例子是此鏈接：

http://www.w3schools.com/php/php_ajax_livesearch.asp

如果鍵入例如搜索領域的關鍵詞，建議降了下來。我已經複製了這個代碼，但想添加一個小小的改變。當你的建議下降，我希望能夠點擊網頁上的其他任何地方，然後再次關閉/隱藏建議列表。與facebook搜索類似，點擊列表，關閉它。

我已經使用了上述鏈接中顯示的相同的javascript，但是我需要添加什麼？

附加到body元素的點擊處理程序？

Answer 1

活動有capturing/bubbling階段。你想捕捉對身體鼓入click：

$(document.body).on('click', function() { $('#live_search_id').hide(); }); 

然後，取消泡event.preventDefault()點擊實時搜索區域時：

$('#live_search_id').on('click', function(e){ 
    /* ... applicable logic - if any ... */ 
    e.preventDefault(); 
}); 

Answer 2

$.on('click', document.body, function() { 
    // Check if this is not #live_search_id or a child 
    if ($(this) != ($'#live_search_id') && $(this).parents('#live_search_id').length == 0) { 
     $('#live_search_id').hide(); 
    } 
});