javascript - 如果 JQUERY 中的 keyup 为空，如何显示一个 div

Question

我有一段代码可以显示在搜索框中输入的 div 内容。

$(document).ready(function(){
  $("#myInput").on("keyup", function() { //#myinput is the search box
    var value = $(this).val().toLowerCase();

//#myList is the content that displays the searched data.
    $("#myList .card").filter(function() { 
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

现在我要显示这个div

<div class="alert alert-warning text-center" id="emptyList" style="display:none;">
        <strong>No data found!</strong> You can add product by clicking the button "Add item" below or <a href="addItem.php">click here</a>
</div>

如果过滤器为空。

我是 jquery 的新手，所以你们能帮我解决这个问题吗。

Answer 1

您可以使用 :visible 伪选择器添加对可见卡片的检查，例如:

$(document).ready(function() {
  $("#myInput").on("keyup", function() { //#myinput is the search box
    var value = $(this).val().toLowerCase();

    //#myList is the content that display the searched data.
    $("#myList .card").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });

    if (!$("#myList .card:visible").length) {
      $('#emptyList').show();
    } else {
      $('#emptyList').hide();
    }
  });
});

速记版本可以这样写:

$('#emptyList').toggle(!$("#myList .card:visible").length);