实现关键词高亮搜索框：仅显示含关键词的div元素

嘿，你已经搞定了高亮功能，剩下的显示/隐藏逻辑其实很容易实现～我们可以在高亮操作之后，遍历所有.cd-item元素，判断每个元素是否包含搜索关键词，然后控制它们的显示状态。

下面是修改后的完整代码，我会一步步解释关键部分：

$(function() {
  $("input").on("input.highlight", function() {
    // 获取搜索关键词，同时去除首尾空格
    var searchTerm = $(this).val().trim();
    
    // 先清除所有标记，再重新标记关键词
    $(".cd-item").unmark().mark(searchTerm);
    
    // 处理每个cd-item的显示/隐藏
    $(".cd-item").each(function() {
      var $item = $(this);
      if (searchTerm === "") {
        // 如果关键词为空，显示所有元素
        $item.show();
      } else {
        // 判断当前item是否包含被标记的内容（即匹配关键词）
        var hasMatch = $item.find("mark").length > 0;
        // 用toggle切换显示状态：有匹配就显示，否则隐藏
        $item.toggle(hasMatch);
      }
    });
  }).trigger("input.highlight"); // 初始化触发一次，确保初始状态正确
});

关键逻辑说明： #

• 处理空关键词：当用户清空搜索框时，要确保所有.cd-item都重新显示，避免停留在隐藏状态。
• 判断匹配状态：利用mark.js生成的<mark>标签来判断当前div是否包含匹配的关键词，这种方式比直接检查文本更准确（因为mark.js会处理精准匹配的情况）。
• 切换显示状态：使用jQuery的.toggle()方法，传入一个布尔值，自动控制元素的显示或隐藏，比单独写show()/hide()更简洁。

如果你想实现不区分大小写的搜索，可以在调用mark()方法时加上配置项，同时调整判断逻辑：

// 标记时开启不区分大小写
$(".cd-item").unmark().mark(searchTerm, {
  ignoreCase: true
});

// 判断时也忽略大小写（可选，因为mark已经处理了）
var hasMatch = $item.find("mark").length > 0;

这样就能完美实现“仅显示包含关键词的div，其余隐藏”的需求啦～

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