Как я могу предотвратить закрытие div результатов поиска при нажатии на него?

Question

Я сделал jsfiddle для этого вопроса. https://jsfiddle.net/1af4gyt5/

Если вы введете данные в поле поиска, вы увидите результаты поиска. Я сделал наложение, которое важно сохранить, если я нажму за пределами поиска, то наложение будет скрыто. И если я сосредоточусь на этом, это покажет. Но я часами пытался заставить результаты поиска DIV НЕ закрываться, если я щелкаю внутри результатов DIV <a> LINK:aaaaaaa</a> etc..

Может ли кто-нибудь помочь мне предотвратить закрытие результатов поиска DIV (#show_search) при нажатии на ссылки внутри результатов поиска DIV (#show_search). Я также хочу, чтобы он работал в сочетании с эффектом наложения на входе поиска.

Большое спасибо за ваше время, ценим его!

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

<style>

  #show_search{
    width: 506px;
    height: auto;
    border: 2px solid black;
    display: none;
    position: absolute;
z-index:1;
    }
  #show_search a{
    border-bottom: 1px solid #ddd;
    display: block;
    text-decoration: none;
    color:black;
    padding:10px;
    text-align: center;
    z-index:1;
    background:yellow;
  }
  #search {
    z-index:1;
  }

  #overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: -1;
    cursor: default;
  }
  </style>
<div id="overlay"></div>
<form class="form-inline my-0"><div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input id='search' type="text" class="form-control input-more-width" placeholder="Search">
</div></form><div class="show_search" id="show_search"><a>LINK:aaaaaa</a><a>LINK:bbbbbbb</a><a>LINK:cccccccc</a></div>

<script>
  $("#search").keyup(function(){
$("#show_search").show();
  });

  $('#search').focus(function() {
  $("#overlay").show();
  $("#search").keyup(function(){
    $("#overlay").show();
  $('#search').focusout(function() {
  $(".show_search").hide();
  $("#overlay").hide();
        });
    });
  });
  </script>

Answer 1

Ваша проблема в обработчике $('#search').focusout, который вызывается всякий раз, когда вы щелкаете ссылку в #show_search (или делаете что-нибудь , чтобы убрать фокус из окна поиска), поскольку оно включает

$(".show_search").hide();

, который скрывает окно результатов поиска.

Чтобы скрыть поле #show_search при щелчке снаружи или вне ввода #search, добавьте обработчик click на всю страницу и проверьте, что щелчок не находится внутри одного из этих элементов; если это не так, закройте окно #show_search:

$(document).on('click', function (e) {
    if ($(e.target).closest("#search").length === 0 && $(e.target).closest("#show_search").length === 0) {
        $('#show_search').hide();
    }
});