让静态网页瞬间拥有站内全局搜索，无需任何后端支持！

前端

2023-07-08 21:53:41

使用 JavaScript 为静态网页添加站内全局搜索

让你的静态网页焕发生机，让用户轻松找到所需信息！本文将指导你使用 JavaScript 为你的网页添加站内全局搜索功能，无需任何后端支持。

什么是静态网页？

静态网页由 HTML、CSS 和 JavaScript 等静态文件组成，这些文件在服务器上不会动态生成或修改。它们加载迅速，有利于搜索引擎抓取，适合展示固定内容。

为什么需要站内搜索？

静态网页往往缺乏站内搜索功能，这可能会让用户难以查找特定信息，尤其是在内容丰富的网站上。为了解决这个问题，我们可以利用 JavaScript 的强大功能添加站内全局搜索。

如何添加 JavaScript 站内搜索

1. 创建搜索框

HTML 代码：

<input type="text" id="search-input" placeholder="输入搜索词">

2. 编写搜索逻辑

JavaScript 代码：

// 获取搜索框元素
const searchInput = document.getElementById('search-input');

// 监听输入事件
searchInput.addEventListener('input', (event) => {
  // 获取搜索词
  const searchTerm = event.target.value;

  // 过滤数据
  const filteredData = data.filter((item) => {
    return item.title.includes(searchTerm) || item.content.includes(searchTerm);
  });

  // 显示结果
  displaySearchResults(filteredData);
});

3. 显示搜索结果

HTML 代码：

<div id="search-results">
  <ul>
    <!-- 搜索结果列表 -->
  </ul>
</div>

JavaScript 代码示例

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

const data = [
  {
    title: '标题一',
    content: '内容一'
  },
  // ...其他数据
];

searchInput.addEventListener('input', (event) => {
  const searchTerm = event.target.value;

  const filteredData = data.filter((item) => {
    return item.title.includes(searchTerm) || item.content.includes(searchTerm);
  });

  displaySearchResults(filteredData);
});

function displaySearchResults(data) {
  searchResults.innerHTML = '';

  data.forEach((item) => {
    const listItem = document.createElement('li');

    listItem.innerHTML = `
      <a href="#">
        <h3>${item.title}</h3>
        <p>${item.content}</p>
      </a>
    `;

    searchResults.appendChild(listItem);
  });
}