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

单击关闭实时搜索框

2 个答案: