如何使用jQuery基于Data属性实现输入驱动的容器动态筛选显隐

没问题，这就给你一个实用的jQuery实现方案，完美适配你的需求——根据搜索框输入动态过滤带data属性的容器：

1. 优化后的HTML结构 #

先给搜索框加个类名方便选择，同时完善容器内容（方便测试效果）：

<input type="search" class="role-search" placeholder="搜索角色、等级、语言或工具...">

<div class="container" data-role="Fullstack" data-level="Midweight" data-languages="JavaScript Ruby" data-tools="Sass">
  Fullstack Midweight | 技能：JavaScript、Ruby、Sass
</div>
<div class="container" data-role="Backend" data-level="Junior" data-languages="Ruby" data-tools="RoR">
  Backend Junior | 技能：Ruby、RoR
</div>
<div class="container" data-role="Frontend" data-level="Senior" data-languages="JavaScript" data-tools="React">
  Frontend Senior | 技能：JavaScript、React
</div>

2. jQuery核心实现代码 #

这段代码会监听搜索框的输入，实时匹配容器的所有data属性并显示/隐藏：

$(document).ready(function() {
  // 监听搜索框的输入事件（覆盖键盘输入、粘贴等所有输入场景）
  $('.role-search').on('input', function() {
    // 获取搜索关键词，去除首尾空格并转为小写（实现不区分大小写搜索）
    const searchKey = $(this).val().trim().toLowerCase();
    
    // 遍历所有容器进行匹配
    $('.container').each(function() {
      const $currentContainer = $(this);
      // 获取当前容器的所有data属性值，统一转为小写后拼接成字符串
      const allDataValues = Object.values($currentContainer.data())
                                .map(value => value.toLowerCase())
                                .join(' ');
      
      // 判断是否匹配：空搜索时显示所有，否则检查关键词是否存在于data属性中
      if (searchKey === '' || allDataValues.includes(searchKey)) {
        $currentContainer.show();
      } else {
        $currentContainer.hide();
      }
    });
  });
});

3. 关键细节说明 #

• 适配所有输入场景：用input事件代替keyup，能捕获粘贴、输入法联想等非键盘直接输入的情况，体验更流畅。
• 不区分大小写：把搜索关键词和data属性值都转为小写，用户输入frontend或Frontend都能匹配到对应容器。
• 全data属性匹配：通过Object.values($currentContainer.data())获取容器的所有data属性值，不管搜索的是角色、等级还是技能，只要包含关键词就会显示对应容器。
• 空值兼容：当搜索框为空时，自动显示所有容器，符合常规搜索逻辑。

可选：仅匹配特定data属性（比如只匹配data-role） #

如果你只需要根据data-role过滤，可以简化判断逻辑：

// 仅匹配data-role属性的版本
if (searchKey === '' || $currentContainer.data('role').toLowerCase().includes(searchKey)) {
  $currentContainer.show();
} else {
  $currentContainer.hide();
}

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