JavaScript搜索框仅返回可见结果，求助实现全量文章检索

你当前的搜索逻辑仅针对页面加载时获取的DOM元素，分页过程中文章会从#articleSource移到#theArticles，导致搜索无法覆盖未在当前页展示的内容；同时搜索与分页逻辑完全独立，没有结合过滤结果进行分页渲染。

基于已有的allArticles数组（包含所有文章DOM元素）实现搜索过滤，让分页逻辑适配过滤后的结果，具体修改如下：

1. 新增全局过滤数组 #

在分页代码的全局作用域中添加变量，用于存储过滤后的文章：

let current_page = 1;
const records_per_page = 8;

const nextButton = document.getElementById("nextButton");
const prevButton = document.getElementById("previousButton");
const articleNumber = document.getElementById("theArticles");
const allArticles = Array.from(document.querySelectorAll('#articleSource .singleArticle'));
// 新增：默认存储所有文章，搜索时更新为过滤结果
let filteredArticles = [...allArticles]; 
const page_span = document.getElementById("page");

2. 修改分页计算与渲染逻辑 #

让分页基于过滤后的文章数组计算页数、渲染内容，同时改用克隆元素避免原DOM结构被破坏：

function numPages() {
    // 改为基于过滤后的文章计算总页数
    return Math.ceil(filteredArticles.length / records_per_page);
}

function changePage(page) {
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();

    articleNumber.textContent = "";
    for (let i = (page - 1) * records_per_page; i < page * records_per_page && i < filteredArticles.length; i++) {
        // 克隆元素，避免移动原#articleSource中的DOM节点
        const articleClone = filteredArticles[i].cloneNode(true);
        articleNumber.append(articleClone);
    }

    page_span.textContent = page + "/" + numPages();
    prevButton.style.visibility = page == 1 ? "hidden" : "visible";
    nextButton.style.visibility = page == numPages() ? "hidden" : "visible";
}

3. 重写搜索函数 #

让搜索逻辑过滤所有文章，然后重置分页并渲染匹配结果：

function searchBar() {
    const searchInput = document.getElementById("search");

    searchInput.addEventListener("input", e => {
        const searchValue = e.target.value.toLowerCase();
        // 过滤所有文章，匹配标题包含关键词的项
        filteredArticles = allArticles.filter(article => {
            const heading = article.querySelector(".articleHeader");
            return heading.textContent.toLowerCase().includes(searchValue);
        });
        // 重置到第一页，重新渲染过滤后的结果
        current_page = 1;
        changePage(current_page);
    });
}

4. 移除无用样式（可选） #

原搜索逻辑中的.hide类切换已无需保留，可删除相关CSS样式。

修改完成后，搜索功能将覆盖所有数据库返回的文章，且搜索结果会自动适配分页逻辑展示。

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