Jquery实现分页后SharePoint自定义FAQ列表搜索仅当前页生效问题

问题根因 #

• 当前分页逻辑仅将当前页的FAQ内容渲染到DOM，其余页数据仅存储在全局results数组中没有生成对应DOM节点，原搜索逻辑仅遍历已渲染的DOM节点，自然无法匹配到其他页的内容
• 原搜索仅做已渲染DOM的显隐控制，没有对接全量原始数据做过滤

修复实现 #

第一步：修改HTML分页部分代码 #

把原来的分页控件包裹在带id的容器中，方便控制显隐：

<div class="container">
  <div id="accordion"> </div>
  <div id="listingTable"></div>
  <!-- 新增分页容器 -->
  <div id="paginationBar">
    <a href="javascript:prevPage()" id="btn_prev">Prev</a>
    <a href="javascript:nextPage()" id="btn_next">Next</a>
    page: <span id="page"></span>
  </div>
</div>

第二步：替换原有搜索逻辑代码 #

把原来的$("#search-filter").on("keyup")整段替换为以下代码，实现全量搜索+分页条显隐控制：

$(document).ready(function() {
    $("#search-filter").on("keyup", function() {
        var unicode = event.charCode ? event.charCode : event.keyCode;
        if(unicode == 27) {
            $(this).val("");
        }
        var searchKey = $(this).val().toLowerCase();
        var listing_table = document.getElementById("listingTable");
        var paginationBar = document.getElementById("paginationBar");

        // 搜索词为空时恢复分页模式
        if(searchKey.trim() === "") {
            paginationBar.style.display = "block";
            changePage(current_page);
            return;
        }

        // 搜索时隐藏分页条，遍历全量数据匹配
        paginationBar.style.display = "none";
        listing_table.innerHTML = "";
        var matched = 0;

        for(var i = 0; i < results.length; i++) {
            // 同时匹配标题和回答内容，可根据需求调整匹配范围
            var title = results[i].Title.toLowerCase();
            var answer = results[i].Answer.toLowerCase();
            if(title.indexOf(searchKey) > -1 || answer.indexOf(searchKey) > -1) {
                matched++;
                var varHref = "#collapse" + i;
                var varBodyId = "collapse" + i;
                listing_table.innerHTML += '<div class="panel-group" id="accord"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="accord-toggle" data-toggle="collapse" href=' + varHref + '><span class="glyphicon glyphicon-bed" style="font-family: arial;">' + results[i].Title + '</span></a></h4></div><div id=' + varBodyId + ' class="panel-collapse collapse" data-parent="#accordion"><div class="panel-body"><div class="list-group"><div type="button" class="list-group-item">' + results[i].Answer + '</div></div></div></div></div></div>';
            }
        }

        if(matched === 0) {
            listing_table.innerHTML = "<span>无匹配记录</span>";
        }
    });
});

额外优化建议 #

可删除原有折叠事件中的alert("aa")代码，避免用户折叠FAQ时弹出不必要的提示框。

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