如何用JavaScript为家庭视频库实现基于文件名的关键词筛选功能

核心实现逻辑 #

• 给所有视频卡片元素新增自定义属性data-filename存储对应视频的完整文件名，避免后续匹配时爬取DOM文本，提升匹配准确率和效率
• 页面新增两个基础交互元素：关键词输入框、确认搜索按钮，也可根据使用习惯新增回车触发搜索的逻辑
• 统一封装过滤函数，核心逻辑如下：
  1. 读取输入框内容，去除首尾空白字符，可统一转成小写实现不区分大小写的匹配，对普通用户更友好
  2. 遍历所有视频卡片元素，读取每个卡片data-filename属性存储的文件名
  3. 若关键词为空，直接展示所有卡片；若关键词非空，判断当前卡片文件名是否包含关键词，包含则展示，不包含则隐藏

原生前端实现示例（无需额外框架） #

HTML 结构 #

<!-- 搜索区域 -->
<div class="search-area">
  <input type="text" id="videoSearchInput" placeholder="输入视频文件名关键词">
  <button id="searchConfirmBtn">确认搜索</button>
</div>

<!-- 视频列表区域示例 -->
<div class="video-list">
  <!-- 单个视频卡片，data-filename存对应视频的完整文件名 -->
  <div class="video-card" data-filename="trip to DC- national mall.mpg">
    <a href="对应视频播放链接">
      <img src="对应缩略图链接" alt="trip to DC- national mall">
      <p>trip to DC- national mall.mpg</p>
    </a>
  </div>
  <div class="video-card" data-filename="trip to DC- congress.mp4">
    <a href="对应视频播放链接">
      <img src="对应缩略图链接" alt="trip to DC- congress">
      <p>trip to DC- congress.mp4</p>
    </a>
  </div>
  <!-- 其余视频卡片格式同上 -->
</div>

辅助CSS #

/* 匹配不到关键词时给卡片添加该类实现隐藏 */
.hidden {
  display: none !important;
}

JS 逻辑代码 #

const searchInput = document.getElementById('videoSearchInput');
const searchBtn = document.getElementById('searchConfirmBtn');
const videoCards = document.querySelectorAll('.video-card');

// 点击确认按钮触发搜索
searchBtn.addEventListener('click', filterVideos);
// 回车触发搜索
searchInput.addEventListener('keydown', e => e.key === 'Enter' && filterVideos());

// 核心过滤函数
function filterVideos() {
  // 处理输入的关键词，转小写实现不区分大小写匹配
  const keyword = searchInput.value.trim().toLowerCase();
  
  videoCards.forEach(card => {
    const fileName = card.dataset.filename.toLowerCase();
    // 关键词为空 或者 文件名包含关键词则展示，否则隐藏
    !keyword || fileName.includes(keyword) ? card.classList.remove('hidden') : card.classList.add('hidden');
  });
}

可选优化点 #

• 如果需要支持多关键词空格分隔匹配，可把输入的关键词按空格拆分为数组，判断文件名是否包含所有拆分后的关键词
• 视频量级超过千级的话，可以提前把所有文件名存在数组里做索引，无需每次遍历DOM元素，提升搜索速度
• 可以新增实时搜索效果，无需点击确认，输入时直接触发过滤，只需给输入框绑定input事件即可
• 需要支持拼音搜索、模糊容错匹配等进阶需求，可以引入轻量前端搜索库处理匹配逻辑

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