如何对Materialize CSS/Bootstrap实现的卡片组件进行筛选搜索

问题根源 #

你当前出现内容缺失的核心原因是搜索筛选逻辑选中了#myDIV下的所有子元素（*选择器），搜索时会单独判断每一个子元素是否包含关键词，不匹配的子元素会被单独隐藏，才会出现匹配到标题就隐藏图片、匹配到编号就隐藏标题的情况。

修复方案 #

只需要替换原页面中搜索相关的JS代码即可，修改后的代码如下：

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // 只筛选卡片级元素，匹配到关键词就显示整张卡片，否则隐藏整张卡片
    $(".grid-item1 .card").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

效果说明 #

修改后搜索逻辑会以整张卡片为单位判断：只要卡片内任意文本（标题、GSP编号等）包含搜索关键词，就会完整展示整张卡片，不匹配的卡片会整体隐藏，不会出现局部内容消失的问题。

内容的提问来源于stack exchange，提问作者Riya Pal