Закрытие окна livesearch, нажав на него

Question

Я думаю, что лучший пример по этой ссылке:

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

Если вы введете ключевое слово в поле поиска в качестве примера, предложения будут раскрыты.Я скопировал этот код, но хотел бы добавить небольшое изменение.Когда вы выпадаете из списка предложений, я бы хотел иметь возможность щелкнуть в любом месте, кроме списка на веб-странице, чтобы снова закрыть / скрыть список предложений.Аналогично поиску в Facebook, где щелчок по списку закрывает его.

Я использовал тот же javascript, который показан в приведенной выше ссылке, но что мне нужно добавить?

Обработчик кликовприкреплен к элементу тела?

Answer 1

События имеют фазы захвата / всплытия фаз.Вы хотите захватить пузырек 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(); 
    }
});