JavaScript的搜索框只返回页面上可见的结果

前端开发 2026-07-09

我今天稍早加入了分页功能，效果不错——文章被分成每组8条显示。

但搜索功能应该能够获取数据库中存在的任意文章标题，而不仅仅是可见的结果。

我的home.php文件是这样的：

        <div class="articleHome">
            <div id="articleSource" style="display:none">
                <?php if (isset($articles)): ?>
                    <?php foreach ($articles as $article): ?>
                        <article class="singleArticle">
                            <h2 class="articleHeader"><?= $article["title"] ?></h2>
                            <p><?= $article["body"] ?></p>
                        </article>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

            <div id="theArticles"></div>
        </div>

        <div class="nextPrevButtons">
            <button id="previousButton">Previous</button>
            <button id="nextButton">Next</button>
            <span id="page"></span>
        </div>

我认为问题可能与id为 #articleSource有关——它最初显示所有数据，但现在为了分页而设置为display:none。

我是否需要以某种方式改为针对这个id，以便搜索能够获取所有可用的标题？

如果能提供帮助，我将不胜感激。

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

        searchInput.addEventListener("input", e => {
            const searchValue = e.target.value.toLowerCase();
            articleHeadings.forEach(heading => {
                const isVisible = heading.textContent.toLowerCase().includes(searchValue);
                heading.closest("article").classList.toggle("hide", !isVisible);
            });
        });
    }

分页代码在这里，如果需要在这里修改任何内容的话

    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'));
    const page_span = document.getElementById("page");

    function numPages() {
        return Math.ceil(allArticles.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 < allArticles.length; i++) {
            articleNumber.append(allArticles[i]);
        }

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

    function prevPage() {
        if (current_page > 1) {
            current_page--;
            changePage(current_page);
        }
    }

    function nextPage() {
        if (current_page < numPages()) {
            current_page++;
            changePage(current_page);
        }
    }

解决方案

位于 #articleSource 容器（div）内的文章仍会被隐藏，除非移除此div元素的该属性。否则会让所有文章都变得可见。

实现你所需效果的更合适的方式，是只把hidden属性定义在该div内部的article标签上，这样你就可以自由地修改它。

可以使用以下任一方法：

#articleSource > .singleArticle .hide{display:none}

#articleSource > article .hide{display:none}

有一件事需要注意的是，theArticles 会被过滤，如果你愿意避免这种情况，请仅引用 articleSource div内的文章：

function searchBar() {
    const searchInput = document.getElementById("search");
    const articleHeadings = document.querySelectorAll("#articleSource > .articleHeader");

    searchInput.addEventListener("input", e => {
        const searchValue = e.target.value.toLowerCase();
        articleHeadings.forEach(heading => {
            const isVisible = heading.textContent.toLowerCase().includes(searchValue);
            heading.closest("article").classList.toggle("hide", !isVisible);
        });
    });
}

JavaScript