只使用JS怎么给静态页面网站添加站内全局搜索功能？

要给静态网站添加站内全局搜索功能，你可以使用JavaScript来监听输入，并在用户输入时更新页面上的搜索结果。以下是一个简单的实现示例：

添加一个搜索输入框和显示搜索结果的容器。
使用JavaScript来监听输入并执行搜索。
使用JavaScript的document.querySelector和document.getElementById方法来定位DOM元素并更新显示结果。

HTML 示例:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Static Site Search</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Search...">
    <div id="searchResults">
        <!-- Search results will be displayed here -->
    </div>
 
    <script src="search.js"></script>
</body>
</html>

JavaScript 示例 (search.js):




document.getElementById('searchInput').addEventListener('input', function() {
    var input = this.value.toLowerCase();
    var searchItems = document.querySelectorAll('.searchable');
    var searchResults = document.getElementById('searchResults');
 
    // Reset results
    searchResults.innerHTML = '';
 
    searchItems.forEach(function(item) {
        var title = item.dataset.title.toLowerCase();
        var content = item.dataset.content.toLowerCase();
        var match = title.indexOf(input) > -1 || content.indexOf(input) > -1;
 
        if (match) {
            var result = document.createElement('div');
            result.textContent = item.dataset.title;
            searchResults.appendChild(result);
        }
    });
});

在这个例子中，我们假设你的静态页面上有一些元素带有searchable类，并且它们有data-title和data-content属性来存储各自的标题和内容。这些数据可以用来与用户的搜索词进行匹配。

请根据你的页面结构和需求调整上述代码。如果你需要更复杂的搜索功能，可能需要使用服务器端的脚本来生成搜索索引并提供搜索结果。

只使用JS怎么给静态页面网站添加站内全局搜索功能？

评论已关闭

推荐阅读