当前位置：首页 > JavaScript

静态网页用js实现搜索功能

2026-04-04 12:32:25JavaScript

实现静态网页搜索功能的方法

静态网页可以通过JavaScript实现客户端搜索功能，无需后端支持。以下是几种常见实现方式：

基础文本搜索实现

创建搜索输入框和结果容器：

<input type="text" id="searchInput" placeholder="搜索...">
<div id="searchResults"></div>

添加JavaScript搜索逻辑：

const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');
const contentToSearch = document.querySelectorAll('.searchable-content');

searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    searchResults.innerHTML = '';

    if (searchTerm.length < 2) return;

    contentToSearch.forEach(item => {
        const text = item.textContent.toLowerCase();
        if (text.includes(searchTerm)) {
            const resultItem = document.createElement('div');
            resultItem.innerHTML = item.innerHTML;
            searchResults.appendChild(resultItem);
        }
    });
});

使用Lunr.js实现高级搜索

安装Lunr.js：

<script src="https://unpkg.com/lunr/lunr.js"></script>

初始化搜索索引：

let idx = lunr(function() {
    this.ref('id');
    this.field('title');
    this.field('content');

    documents.forEach(doc => {
        this.add(doc);
    });
});

执行搜索：

静态网页用js实现搜索功能

function search() {
    const query = document.getElementById('searchInput').value;
    const results = idx.search(query);
    displayResults(results);
}

实现关键词高亮显示

在搜索结果中高亮匹配文本：

function highlightText(text, searchTerm) {
    const regex = new RegExp(`(${searchTerm})`, 'gi');
    return text.replace(regex, '<span class="highlight">$1</span>');
}

添加CSS样式：

.highlight {
    background-color: yellow;
    font-weight: bold;
}

优化搜索性能

对于大量内容，考虑以下优化：

实现防抖机制减少频繁搜索

静态网页用js实现搜索功能

let debounceTimer;
searchInput.addEventListener('input', function() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
      performSearch(this.value);
  }, 300);
});

预加载搜索索引
实现分页显示结果

完整示例代码

HTML结构：

<div class="search-container">
    <input type="text" id="searchInput" placeholder="输入关键词...">
    <button id="searchButton">搜索</button>
</div>
<div id="searchResults"></div>

JavaScript实现：

document.addEventListener('DOMContentLoaded', function() {
    const searchData = [
        {id: 1, title: "文章1", content: "这是第一篇文章的内容"},
        {id: 2, title: "文章2", content: "这是关于JavaScript的教程"}
    ];

    const idx = lunr(function() {
        this.ref('id');
        this.field('title');
        this.field('content');
        searchData.forEach(doc => this.add(doc));
    });

    document.getElementById('searchButton').addEventListener('click', function() {
        const query = document.getElementById('searchInput').value;
        const results = idx.search(query);

        let html = '';
        results.forEach(result => {
            const item = searchData.find(d => d.id == result.ref);
            html += `<div class="result-item">
                <h3>${item.title}</h3>
                <p>${item.content}</p>
            </div>`;
        });

        document.getElementById('searchResults').innerHTML = html || '无结果';
    });
});

这些方法可以根据具体需求进行组合和调整，适用于大多数静态网站的搜索功能实现。