SharePoint自定义FAQ列表搜索筛选实现及仅显示最后一条记录问题排查

问题根因 #

1. 仅显示最后一条记录的核心原因：GenerateAccordionFromJson函数循环遍历列表项时，每次都直接覆盖accordionContent变量，没有做累加，最终仅返回最后一条数据的HTML结构
2. 筛选、折叠交互异常原因：

• 折叠事件绑定在DOM渲染之前执行，无法匹配到动态生成的元素
• 组件选择器不匹配：使用Bootstrap3的panel组件，但事件绑定写的是Bootstrap4的card-header选择器
• 字段名不匹配：你的列表问题列是Questions，但代码中错误读取Title字段
• 多余的调试alert语句阻塞正常交互

修正后完整代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<style>
  .filter-area{margin-bottom: 15px;}
  #category-filter{margin-right: 15px;padding: 4px 8px;}
  #search-filter{padding: 4px 8px;}
</style>
<!-- 筛选区域：新增分类筛选下拉框 -->
<div class="row-fluid text-left filter-area">
  <select id="category-filter">
    <option value="">全部分类</option>
  </select>
  <span class="clearable">
    <input type="text" id="search-filter" placeholder="输入关键词搜索" />
  </span>
</div>
<br/>
<div class="container">
  <div id="accordion"></div>
</div>   

<script type="text/javascript">  
$(document).ready(function(){
  GetItems();
  // 关键词搜索逻辑
  $("#search-filter").on("keyup", function() {
    var unicode = event.charCode ? event.charCode : event.keyCode;
    if (unicode == 27) {
      $(this).val("");
    }
    filterFAQ();
  });
  // 分类筛选逻辑
  $("#category-filter").on("change", function(){
    filterFAQ();
  })
  // 统一筛选方法
  function filterFAQ(){
    var searchKey = $("#search-filter").val().toLowerCase();
    var selectedCategory = $("#category-filter").val();
    $('.panel').each(function() {
      var questionText = $(this).find('.accord-toggle').text().toLowerCase();
      var itemCategory = $(this).attr('data-category');
      var matchSearch = questionText.indexOf(searchKey) >= 0;
      var matchCategory = selectedCategory == "" || itemCategory == selectedCategory;
      if(matchSearch && matchCategory){
        $(this).show();
      }else{
        $(this).hide();
        $('.panel-collapse.in').collapse('hide');
      }
    });
  }
});

function GetItems(){
  var siteURL = _spPageContextInfo.webServerRelativeUrl;
  $.ajax({
    url: siteURL + "/_api/web/lists/GetByTitle('EPTFAQ')/items?$select=Questions,Answers,Category",
    type: "GET",
    dataType: "json",
    headers: {
      Accept: "application/json;odata=verbose"
    },
    success: function(data) {
      if (data.d.results.length > 0 ) {
        // 生成分类下拉选项
        var categories = [...new Set(data.d.results.map(item=>item.Category))];
        categories.forEach(cate=>{
          $("#category-filter").append(`<option value="${cate}">${cate}</option>`)
        })
        // 生成手风琴结构
        $('#accordion').append(GenerateAccordionFromJson(data.d.results));
        // 动态绑定折叠事件
        $(".collapse").on('show.bs.collapse', function(){
          $(this).siblings(".panel-heading").find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
          $(this).siblings(".panel-heading").find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
      }else{
        $('#accordion').append("<span>暂无相关数据</span>");
      }
    },
    error: function(error){
      alert(JSON.stringify(error));
    }
  });
}

function GenerateAccordionFromJson(objArray)  {
  var accordionContent = "";
  for (var i = 0; i < objArray.length; i++) {
    var varHref= "#collapse"+i
    var varBodyId = "collapse"+i
    // 改为累加赋值
    accordionContent += '<div class="panel panel-default" data-category="'+objArray[i].Category+'">'  +
      '<div class="panel-heading">'   +
      '<h4 class="panel-title">'  +
      '<a class="accord-toggle" data-toggle="collapse" href="'+varHref+'">'    +
      '<span class="glyphicon glyphicon-plus"></span> '+objArray[i].Questions +
      '</a>' +
      '</h4></div>' +
      '<div id="'+varBodyId+'" class="panel-collapse collapse" data-parent="#accordion">' +
      '<div class="panel-body">' +
      objArray[i].Answers +
      '</div></div></div>';
  }
  // 外层统一套panel-group，避免重复生成
  return '<div class="panel-group" id="accord">'+accordionContent+'</div>';
}
</script>

使用注意事项 #

1. 确认你的SharePoint列表内部名称和代码中一致：Questions、Answers、Category，如果内部名称不同需要对应修改
2. 如果列表名称不是EPTFAQ，需要修改AJAX请求URL中的列表名称

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