как скрыть список, когда поле ввода пусто в списке фильтров / поиска

Question

Я пытаюсь создать список фильтров / поиска, зная, что я хочу скрыть список, пока пользователь не попытается ввести и скрыть его, когда пользователь удалит все символы в поле (myInput)

это два тега input (myInput) и список (mylist)

<input id="myInput" type="search" placeholder="type to search" />
<ul id="myList">
  <li><a href="#">X</a></li>
  <li><a href="#">Y</a></li>
  <li><a href="#">Z</a></li>
</ul>

Этот код jquery, $ ("# myList") скрыт на странице загрузки, пока пользователь не начнет печатать но что, если пользователь удалит все символы в поле, как я могу снова скрыть список?

$("#myInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myList li").filter(function() {
    $("#myList").show();
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

Answer 1

Вам нужно просто установить для него простое условие, используя интерфейс событий или фактическое значение, которое вы пытаетесь установить, вы можете выполнить любое из них, но, на мой взгляд, (потому что это будет предотвратить создание ненужного элемента jQuery, например $(this)) , использование события будет более эффективным. Поэтому всякий раз, когда во входном значении есть что-то, что вы go для запуска функции фильтра, в противном случае вы что-нибудь скроете.

$("#myInput").on("keyup", function(event) {
  if (event.target.value) {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $("#myList").show();
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  } else {
    $("#myList").hide();
  }
});

#myList {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="search" placeholder="type to search" />
<ul id="myList">
  <li><a href="#">X</a></li>
  <li><a href="#">Y</a></li>
  <li><a href="#">Z</a></li>
</ul>

Answer 2

Учтите следующее.

$(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    if (value.length) {
      $("#myList li").filter(function() {
        $("#myList").show();
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    } else {
      $("#myList").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="search" placeholder="type to search" />
<ul id="myList">
  <li><a href="#">X</a></li>
  <li><a href="#">Y</a></li>
  <li><a href="#">Z</a></li>
</ul>