Скрыть div, нажав на фон страницы

Question

У меня на сайте поиск автозаполнения. Если я начинаю вводить то, что ищу, он выводит записи с помощью ajax в div #country_list_id.

Теперь, если я хочу скрыть этот div с результатами, я могу это сделать, удалив ключевое слово из текстового ввода.

Как я могу это скрыть, щелкнув фон страницы или другой элемент на сайте?

<div class="input-group stylish-input-group bc-wrapper">
                        <input type="text" class="form-control header_search_input" autocomplete="off" placeholder="Termékek keresése..." name="country_id" id="country_id" onkeyup="autocomplet();" >
                        <span class="input-group-addon">
                            <button type="submit" class="header_search_button"><i class="fa fa-search header_search_icon" aria-hidden="true"></i></button>
                        </span>
                    </div>
                    <div class="bc-menu list-group" id="country_list_id"></div>




function autocomplet()
{
    var min_length = 2;
    var keyword = $.trim($('#country_id').val());
    if (keyword.length >= min_length)
    {
        $.ajax({
            url: 'files/search.php',
            type: 'POST',
            data: {keyword:keyword},
            success:function(data){
                $('#country_list_id').show();
                $('#country_list_id').html(data);
            }
        });
    }
    else
    {
        $('#country_list_id').hide();
    }
}
function set_item(item)
{
    $('#country_id').val(item);
    $('#country_list_id').hide();
}

Answer 1

Есть несколько способов: вы можете переключить css для div (onclick) и добавить / удалить класс с помощью display:none;, например. .hidden { display: none; } Я бы посоветовал этот метод, если вы хотите полностью скрыть div.

если вы хотите, чтобы некоторые элементы div оставались видимыми, но они занимают слишком много места, вы можете использовать эффект «читать дальше» / увеличить / уменьшить, как показано в этой скрипке (у меня есть опубликовал код в другом месте ранее, поэтому я не буду публиковать его снова!)

Удачи

Answer 2

попробуйте

Используйте document нажмите

$(document).click(function(e) {
    $('#country_list_id').hide();
});

и добавьте script файл

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Что вы можете сделать, это добавить прослушиватель событий в тело и проверить, равен ли event.target вашему элементу поиска, если нет, то скрыть его.

document.body.addEventListener('click', (e) => {
  //your logic
}

Answer 4

Использовать делегирование событий - добавьте прослушиватель к document.body и проверьте, находится ли выбранная цель внутри #country_list_id. Если нет, то скрыть #country_list_id:

$(document).on('click', (e) => {
  const { target } = e;
  if (!target.closest('#country_list_id')) $('#country_list_id').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>outer content 1 (click will hide)</div>
<div>outer content 2 (click will hide)
  <div class="bc-menu list-group" id="country_list_id">list content (click will not hide)</div>
</div>