Пользовательский селектор не будет щелкать из-за свойства отображения

Question

Итак, я сделал пользовательский селектор, такой как

<div class="search">
                <input class="custom-selector" type="text" autocomplete="off" >
                <ul class="custom-options hidden">
                    <li>New York</li>
                    <li>Moscow</li>
                    <li>Baku</li>
                </ul>
            </div>

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

$('.custom-selector').focus(function() {
    $(".custom-options").removeClass("hidden");
}).blur(function() {
    $(".custom-options").addClass("hidden");
})

На следующем шаге мне понадобилась функция, чтобы онкликом получал значение li и копировал его на вход, но всякий раз, когда я нажимал на ли, вход становился несфокусированным, и функция onclick не могла работать нет отображения, одно решение, которое я нашел, было непрозрачность 0 вместо отображения нет для скрытого класса, есть ли более оптимальный и правильный способ решить эту проблему?

Answer 1

Редактировать: Вы можете добавить timeout, может быть?

$('.custom-selector').focus(function() {
  $(".custom-options").removeClass("hidden");
}).blur(function() {
  setTimeout(function () { $(".custom-options").addClass("hidden") }, 350);
})

$('.custom-options > li').click(function(e) {
  $('.custom-selector').val($(this).text());
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
  <input class="custom-selector" type="text" autocomplete="off">
  <ul class="custom-options hidden">
    <li>New York</li>
    <li>Moscow</li>
    <li>Baku</li>
  </ul>
</div>

Answer 2

Вы можете использовать комбинацию фокусируемых элементов и псевдокласса: focus-Within, чтобы не потерять фокус.

$('.custom-options a').click(function (ev) {
  const selected = ev.target.textContent;
  $('.custom-selector').val(selected);
  ev.target.blur();
});

.custom-options {
  display: none;
 }
.search:focus-within .custom-options {
  display: block;
}

.custom-options a {
  text-decoration: none;
  color: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="search">
  <input class="custom-selector" type="text" autocomplete="off">
  <ul class="custom-options">
    <li>
      <a href="#">New York</a>
    </li>
    <li>
      <a href="#">Moscow</a>
    </li>
    <li>
      <a href="#">Baku</a>
    </li>
  </ul>
</div>