Bootstrap 4卡片jQuery过滤异常求助：搜索时所有卡片被隐藏

嘿，我帮你揪出代码里的几个小问题，调整后就能正常实现过滤功能啦：

问题分析 #

你的代码里有几个关键问题导致所有卡片被误隐藏：

• 字符串拼接错误：:contains()选择器里的变量插入方式不对，导致选择器解析出错，匹配不到任何元素，最终所有卡片都被加上d-none类。
• :contains()区分大小写：jQuery默认的:contains()是区分大小写的，比如输入"test"匹配不到"Test"，也会导致不该隐藏的卡片被隐藏。
• show()无法覆盖d-none：Bootstrap的d-none类带有!important，$('.card').show()设置的display:block优先级不够，没法把隐藏的卡片重新显示出来。

修正后的代码 #

$('#search').keyup(function() {
  // 先移除所有卡片的d-none类，确保初始状态是显示的
  $('.card').removeClass('d-none');
  
  var filter = $(this).val().trim(); // 去除首尾空格，优化搜索体验
  if (!filter) return; // 如果输入为空，直接跳出，不用执行过滤逻辑

  // 筛选出不包含关键词的卡片，添加d-none类隐藏
  $('.card-deck .card').filter(function() {
    // 转换为小写后比较，实现大小写不敏感的匹配
    return !$(this).find('.card-body h4').text().toLowerCase().includes(filter.toLowerCase());
  }).addClass('d-none');
});

代码说明 #

1. 用removeClass('d-none')替代show()：直接移除Bootstrap的隐藏类，避免!important带来的优先级冲突问题。
2. 大小写不敏感匹配：把标题文本和输入内容都转成小写后比较，不管用户输入大小写都能精准匹配。
3. 简化过滤逻辑：用filter()方法更直观地筛选不匹配的卡片，比嵌套parent().parent()更清晰，也不容易出错。
4. 空输入判断：如果搜索框为空，直接跳出函数，避免不必要的DOM操作。

如果你还是想用:contains()的写法，可以先扩展一个不区分大小写的版本，比如：

// 扩展jQuery，添加不区分大小写的contains选择器
$.expr[":"].containsCaseInsensitive = function(obj, index, meta) {
  return $(obj).text().toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

之后在代码里用:containsCaseInsensitive()替代原来的:contains()，也能解决大小写匹配的问题。

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