$(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新手,所以你们可以在这方面帮助我.
最佳答案
您可以使用：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();
}
});
});
shorhand版本可以这样写：
$('#emptyList').toggle(!$("#myList .card:visible").length);
