如何通过HTML相关元素实现页面内内容搜索功能？

技术选型 #

• 小型站点直接用HTML+CSS+原生JS实现即可，无额外依赖，部署成本为0，适合命令量低于100条的场景
• 如果站点本身基于React/Vue等前端框架开发，直接在现有框架基础上写逻辑即可，不需要额外引入重依赖

核心功能实现 #

1. 数据预处理 #

首先把所有需要搜索的内容整理成结构化数组存在前端，示例格式如下：

const allContent = [
  {
    commandName: "help",
    description: "查询所有可用命令的用法",
    usage: "/help [目标命令名称]"
  },
  // 剩余所有bot相关内容按相同格式补充
]

2. 实时搜索逻辑 #

监听搜索框的输入事件，每次输入后过滤匹配的内容，重新渲染结果列表即可，示例代码：

// 防抖函数，避免频繁触发渲染
function debounce(func, delay = 300) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), delay)
  }
}

const searchInput = document.querySelector('#search-input')
const resultContainer = document.querySelector('#result-container')

// 搜索逻辑
const handleSearch = debounce((e) => {
  const keyword = e.target.value.trim().toLowerCase()
  // 无关键词时返回全部内容
  if (!keyword) {
    renderList(allContent)
    return
  }
  // 自定义匹配规则，可自行调整匹配的字段和规则
  const filteredList = allContent.filter(item => {
    return item.commandName.toLowerCase().includes(keyword)
    || item.description.toLowerCase().includes(keyword)
    || item.usage.toLowerCase().includes(keyword)
  })
  renderList(filteredList)
})

// 渲染列表函数，可自行调整DOM结构
function renderList(list) {
  if (list.length === 0) {
    resultContainer.innerHTML = `<p>没有找到匹配的内容</p>`
    return
  }
  resultContainer.innerHTML = list.map(item => `
    <div class="command-card">
      <h3>${item.commandName}</h3>
      <p>${item.description}</p>
      <code>${item.usage}</code>
    </div>
  `).join('')
}

// 绑定事件
searchInput.addEventListener('input', handleSearch)

体验优化点 #

• 关键词高亮：渲染结果时把和搜索词匹配的字符用特殊样式标记，方便用户快速定位匹配位置
• 分类筛选：可以在搜索框旁加分类选项，支持只搜索命令名/描述/使用方法，提升搜索精准度
• 快捷键支持：添加Ctrl+K快捷键自动聚焦搜索框，符合常用站点的交互习惯

内容的提问来源于stack exchange，提问作者Half-Cooked Ramen