$(document).ready(function(){$("#myInput").on("keyup",function() { //#myinput is the search Boxvar 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新手,所以你们可以在这方面帮助我.
最佳答案
您可以使用：visible伪选择器添加对可见卡片的检查,例如：
$(document).ready(function() {$("#myInput").on("keyup",function() { //#myinput is the search Boxvar 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();}});});
shorhand版本可以这样写：
$('#emptyList').toggle(!$("#myList .card:visible").length);
