如何实现Bootstrap搜索框输入关键词实时过滤匹配锚点标签

直接用原生JavaScript配合Bootstrap自带的工具类就能实现，不需要额外引入第三方库，逻辑非常简单：监听搜索框的输入事件，每次输入时遍历所有链接项，根据关键词匹配结果控制对应项的显隐即可。

具体实现步骤 #

1. 保持你现有的HTML结构不用改动
2. 在页面底部（</body>标签前）加入如下JavaScript代码：

// 绑定搜索框和链接元素
const searchInput = document.getElementById('myInput');
const allLinks = document.querySelectorAll('.article-link');

// 监听搜索框输入
searchInput.addEventListener('input', function() {
  // 获取输入关键词，统一转小写实现不区分大小写匹配
  const searchKey = this.value.trim().toLowerCase();

  allLinks.forEach(link => {
    const linkContent = link.textContent.toLowerCase();
    // 用Bootstrap自带的d-none类控制显隐，匹配失败就隐藏，成功就显示
    link.classList.toggle('d-none', !linkContent.includes(searchKey));
  })
})

补充说明 #

• 上述逻辑默认支持空输入状态展示全部链接：当搜索框为空时，空字符串会被所有文本包含，所有链接都会自动恢复显示，不需要额外加判断。
• 匹配规则默认是任意位置包含关键词，比如输入cafe就能匹配所有带cafe的店铺，符合常规搜索使用习惯。如果需要改成仅匹配文本开头，把linkContent.includes(searchKey)换成linkContent.startsWith(searchKey)即可。
• 如果你不想用Bootstrap的d-none类，也可以直接操作内联样式：匹配时设置link.style.display = 'inline-block'，不匹配时设置link.style.display = 'none'，效果完全一致，只是用Bootstrap自带类写法更简洁。

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