Как скрытие и появление блока div?

Question

[Дарт Вейдер]

Здравлясвуйте.

Имеется форма поиска на сайте, при нажатии на input я сделал так, чтобы появлялся блок с подсказками, а как его потом скрыть не имею понятия. Хочу чтобы при щелчке в любом месте сайта (кроме инпута, который активирует данный блок) блок скрывался. Сейчас он скрывается если я снова нажму на данный input.

Вот как я делал

форма поиска

<form action="" method="post">
                 <input type="text" name="search"  onclick="javascript:look('hot-word');">
                 <input type="submit" value="Найти"  />
                    <div class="popular-find" id="hot-word" style="display: none;">
                        <div class="hot-word">
                            <div class="hot-word-head">Подсказка</div>
                            <div class="hot-word-list">
                                <span>
                                    <a href="#">1</a>
                                </span>
                                <span>
                                    <a href="#">2</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </form>

А вот обработчик

<script>
function look(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>

Как реализовать, то что я хочу?

Answer 1

[Nikolay Talanov]

Для инпута надо навесить ивент blur, который будет прятать блок. blur это ивент, который срабатывает когда элемент теряет фокус (то есть если был выделен инпут, и юзер кликнул не по инпуту, то сработает blur ивент).

document.querySelector("#input").addEventListener("blur", function() {
  // спрятать блок
}, false);

Comments

[Дарт Вейдер]

Что - то не получается, скорее всего я делаю что-то не верно. Я вообще не дружу с JQUERY (

Не могли бы Вы подробнее показать?

[Nikolay Talanov]

Если что, то это не jQuery, а ванильный жс :)
codepen.io/suez/pen/80204bb3904883add4f1b24b03a6b919 - вот уродливая демка, с использованием id и прочих ужасов (сделал максимально похожим на ваш код). Первый eventListener по фокусу на инпут показывает нам блок, а второй eventListener по blur его прячет. Лучше конечно все это дело пилить на добавлении/убирании классов, но это уже другая история.

[Дарт Вейдер]

Nikolay Talanov: Спасибо огромное Вам!

Answer 2

[Настя Сухарик]

Ну суть если нажимаешь на все кроме инпута подсказка прячется. Что-то типа такого $('input:not(.search)') , а дальше действие и прячешь. Но я б подсказку на ховер выводила.

Comments

[Дарт Вейдер]

Настя, спасибо большое за отклик. Нам нужно по клику.