如何使用Javascript创建客户端搜索栏（无需服务端编程支持）

你需要的当前页面关键词、文章标题搜索功能完全可以用纯JS实现，不需要后端PHP服务，也不需要调用外部API。如果页面内的文章数量不多（100篇以内），甚至不需要提前创建索引，直接遍历页面内容匹配即可，性能完全够用。

核心实现逻辑 #

• 首先修改原有搜索表单的默认提交逻辑，取消提交到PHP的配置
• 监听搜索框的输入/提交事件，获取用户输入的关键词
• 遍历页面内所有文章元素，匹配标题、正文内容是否包含关键词
• 隐藏不匹配的内容，展示匹配结果，可额外扩展关键词高亮、匹配度排序功能

索引与API说明 #

• 你当前的场景不需要调用任何外部API，所有逻辑都在用户浏览器本地运行
• 文章数量少于100篇时不需要提前做索引，直接遍历DOM匹配的性能足够
• 如果后续内容增长到数百篇，可以在页面加载时提前把所有文章的标题、正文、链接存入JS数组做预索引，搜索时直接查数组即可，比每次读取DOM内容的性能更高，预索引示例代码如下：

// 页面加载完成后创建预索引
const articleIndex = []
window.addEventListener('DOMContentLoaded', () => {
  const articles = document.querySelectorAll('.article-card')
  articles.forEach(art => {
    articleIndex.push({
      dom: art,
      content: art.textContent.toLowerCase() // 提前存好小写文本，搜索时不用重复转换
    })
  })
})

适配你现有代码的可运行实现 #

修改后的HTML代码 #

给表单加id取消提交地址，给所有文章卡片加统一类名方便JS遍历：

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <div class="search-container">
    <form id="searchForm">
      <input type="text" placeholder="搜索内容.." id="searchInput" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>

<div class="row">
  <div class="leftcolumn">
    <div class="card article-card">
    <div id="Title">
      <a href="#"><h2>Article 1</h2></a>
      <h5>Date</h5>
      
      <p>Some text over there.,.. </p>
    </div>
    </div> 
    </div>
    </div>
    
  <div class="row">
  <div class="card article-card">
  <div id="Title2">
    <a href="#"><h2>Article 2</h2></a>
    <h5>Date</h5>
    <p> Some text over here..... </p>

  </div>
  </div> 
  </div>

新增JS代码 #

放在页面底部或者DOM加载完成的回调里即可，支持点击提交搜索、输入实时搜索两种模式：

// 阻止表单默认提交行为
document.getElementById('searchForm').addEventListener('submit', e => {
  e.preventDefault()
  execSearch()
})

// 输入内容实时搜索，不需要点击提交按钮可以保留这段
document.getElementById('searchInput').addEventListener('input', execSearch)

function execSearch() {
  const keyword = document.getElementById('searchInput').value.trim().toLowerCase()
  const articles = document.querySelectorAll('.article-card')

  articles.forEach(art => {
    const artContent = art.textContent.toLowerCase()
    if(keyword === '' || artContent.includes(keyword)) {
      art.style.display = 'block'
      // 可在此处扩展关键词高亮逻辑
    } else {
      art.style.display = 'none'
    }
  })
}

可选扩展：关键词高亮 #

新增CSS样式：

.search-highlight {
  background: #ffeb3b;
  font-weight: bold;
}

在匹配到关键词时，把文章内容里的对应关键词替换为带search-highlight类的span标签即可实现高亮效果。

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