How to close the window with search tips when clicking outside the input and outside the window?

Question

There is input , with the focus on which a block with search hints is opened.

 $(".search_input").focus(function () { $(".hints").show(); });

How to make the block close when clicking outside input 'a and outside the block? An example can be found here by clicking on the search box.

UPD: noted that this question already exists. The proposed solution is not suitable, since it is necessary to close the block when clicking outside the block, and if the click was not on the input. Also, when using the proposed solution, my block opens and immediately closes.

Js:

 $(document).mouseup(function (e) { var container = $(".hints"); if (container.has(e.target).length === 0){ container.hide(); } }); $(".search_input").focus(function () { $(".hints").show(); });

HTML:

 <div class="search"> <form action="#" method="get"> <input class="search_input" type="text" placeholder="Поиск детали, например: 990190112"> <!-- settings --> <div class="settings"> <input type="radio" name="radio" id="radio1"> <label for="radio1" data-placeholder="Введите номер детали">Искать по номеру детали</label> <input type="radio" name="radio" id="radio2"> <label for="radio2" data-placeholder="Введите что-то">Если нужен этот пункт</label> <input type="radio" name="radio" id="radio3"> <label for="radio3" data-placeholder="Введите VIN-номер">Искать по VIN-номеру</label> </div> <!-- /settings --> <button class="search_btn"></button> </form> <div class="settings_btn"> <div class="arrow_up"></div> </div> <!-- hints --> <div class="hints"> <ul> <li><a href="#">17020400F3009</a></li> <li><a href="#">17020400F3009</a></li> <li><a href="#">17020400F3009</a></li> <li><a href="#">17020400F3009</a></li> <li><a href="#">17020400F3009</a></li> <li><a href="#">17020400F3009</a></li> <li><a href="#">17020400F3009</a></li> </ul> </div> <!-- /hints --> </div>

Possible duplicate question: How in javascript to "close" the div when clicking outside of this diva?
By the way, I did not understand where to look at the example on the indicated site
There when you click on the search line joxi.ru/l2ZnXxgS81gyM2
it is not entirely clear what it means when clicking outside the window .

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-07-09T13:44:31

Simply apply the conditions:

close the block when clicking outside the block - $target.closest('.hints').length === 0
if the click was not on the input - !$target.hasClass('search_input')

If both conditions are met - it means it is necessary to close.

Example:

 var container = $(".hints"); $(document).mouseup(function(e) { var $target = $(e.target); if ($target.closest('.hints').length === 0 // если не внутри блока hints && !$target.hasClass('search_input')) { // и не по инпуту с классом search_input container.hide(); } }); $(".search_input").focus(function() { container.show(); });

 .hints { border: 1px solid black; display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="search"> <form action="#" method="get"> <input class="search_input" type="text" placeholder="Поиск детали, например: 990190112"> <!-- settings --> <div class="settings"> <input type="radio" name="radio" id="radio1"> <label for="radio1" data-placeholder="Введите номер детали">Искать по номеру детали</label> <input type="radio" name="radio" id="radio2"> <label for="radio2" data-placeholder="Введите что-то">Если нужен этот пункт</label> <input type="radio" name="radio" id="radio3"> <label for="radio3" data-placeholder="Введите VIN-номер">Искать по VIN-номеру</label> </div> <!-- /settings --> <button class="search_btn"></button> </form> <div class="settings_btn"> <div class="arrow_up"></div> </div> <!-- hints --> <div class="hints"> <ul> <li><a href="#">17020400F3009</a> </li> <li><a href="#">17020400F3009</a> </li> <li><a href="#">17020400F3009</a> </li> <li><a href="#">17020400F3009</a> </li> <li><a href="#">17020400F3009</a> </li> <li><a href="#">17020400F3009</a> </li> <li><a href="#">17020400F3009</a> </li> </ul> </div> <!-- /hints --> </div>

I had it so jsfiddle.net/y555shm5 Do not tell me yet, this script can be applied, if on page 4 there are windows, and if one of them is opened, does it close when you click past it?
@ ViktorPavlov, I can’t understand exactly what behavior you want in the end

How to close the window with search tips when clicking outside the input and outside the window?

1 answer 1

More articles: