如何使用jQuery按多关键词过滤DIV元素，支持全匹配、部分匹配及大小写不敏感

你可以直接使用下面的代码实现需求，不需要依赖jQuery的属性选择器，通过遍历+全匹配判断即可实现多关键词全部命中的过滤逻辑：

优化后的HTML结构 #

建议给需要搜索的列表项加上统一类名，避免影响页面其他无关的div元素：

<input id="search" type="text">

<div class="search-item">Caramel Apples</div>
<div class="search-item">Strawberry Lemonade</div>
<div class="search-item">Pineapple Cake</div>
<div class="search-item">Apple Pie</div>
<div class="search-item">Cherry Ice Cream</div>

jQuery逻辑代码 #

// 监听搜索框输入事件，实时触发过滤
$('#search').on('input', function() {
  // 处理输入的关键词：去首尾空格→转小写→按任意数量空格分割→过滤空关键词
  const keywordList = $(this).val().trim().toLowerCase().split(/\s+/).filter(word => word.length > 0);
  // 遍历所有搜索项判断匹配状态
  $('.search-item').each(function() {
    const currentText = $(this).text().toLowerCase();
    // every方法保证所有关键词都命中才返回true，实现AND匹配
    const isMatched = keywordList.every(key => currentText.includes(key));
    // 根据匹配结果切换显示/隐藏
    $(this).toggle(isMatched);
  });
});

功能说明 #

• 支持空格分隔的任意数量关键词，所有关键词都命中才会展示对应条目
• 自动处理连续空格、首尾空格的无效输入场景
• 全流程转小写处理，天然支持大小写不敏感匹配
• 输入app ca时，Caramel Apples（含app和ca）、Pineapple Cake（含app和ca）会正常展示，其余条目隐藏，完全符合你给出的示例要求

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