Sharepoint：如何根据搜索关键字过滤常见问题解答列表

Question

我有一个 SharePoint 自定义常见问题解答列表（列：Questions、Answers、Category）。

我想根据用户在前端选择的类别来过滤此常见问题解答（UI 这样的内容应该适合我：JSFiddle）

更新：

我在 SharePoint“现代脚本编辑器 Web 部件”中使用了上述 JS Fiddle 代码。

此处，常见问题解答仅显示 SharePoint 列表中的最后一条记录。

<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>
<script type="text/javascript">  
  $(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();
      $('.accord-toggle').each(function() {
        var cellText = $(this).text().toLowerCase();
        var accordion = $('#accordion panel');
        if (cellText.indexOf(searchKey) >= 0) {
          $(this).parent().parent().show();
        }
        else {
          $(this).parent().parent().hide();
          $('.panel-collapse.in').collapse('hide');
        }
      }
                              );
    }
                          );
  }
                   );
</script>  
<br/>
<div class="row-fluid text-left">
  <span class="clearable">
    <input type="text" id="search-filter" placeholder="Type to Search" />
    <span class="icon_clear">x
    </span>
  </span>
</div>
<br/>
<script type="text/javascript">  
  $(document).ready(function(){
    GetItems();
    $(".collapse")
      .on('show.bs.collapse', function(){
      alert("ss");
      $(this).siblings(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
    }
         )
      .on('hide.bs.collapse', function(){
      alert("aa");
      $(this).siblings(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
    }
         );
  }
                   );
  function GetItems(){
    var siteURL = _spPageContextInfo.webServerRelativeUrl;
    $.ajax({
      url: siteURL + "/_api/web/lists/GetByTitle('EPTFAQ')/items",   //change the list name
      type: "GET",
      dataType: "json",
      headers: {
        Accept: "application/json;odata=verbose"
      }
      ,
      success: function(data) {
        if (data.d.results.length > 0 ) 
        {
          $('#accordion').append(GenerateAccordionFromJson(data.d.results));
          console.log(data.d.results);
        }
        else{
          $('#accordion').append("<span>No Records Found.</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-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">'+objArray[i].Title+'<span class="badge">1</span></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">'+objArray[i].Answer+'</div>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>' +
        ' </div>';
    }
    console.log(accordionContent);
    return accordionContent;
  }
</script>  
</head>
<body>
  <div class="container">
    <div id="accordion">
    </div>
  </div>   
</body>

输出：

SharePoint 列表视图：

结果输出错误：

预期输出：

应该显示所有 3 个列表，我应该能够过滤结果（就像在 JS Fiddle 示例中一样）。

Answer 1

在函数 GenerateAccordionFromJson 中，这一行

改为accordionContent = accordionContent +'<div class="panel-group" id="accord">' + ....

Sharepoint：如何根据搜索关键字过滤常见问题解答列表

Sharepoint: How to filter FAQ List based on search keyword

javascript

jquery

dom

sharepoint

web-parts