Search code examples
javascriptjquerydomsharepointweb-parts

Sharepoint: How to filter FAQ List based on search keyword

I have a SharePoint custom FAQ List (columns: Questions, Answers, Category).

I want to filter this FAQ based on the user selecting the category in the front-end (A UI something like this should work for me: JSFiddle)

UPDATE:

I have used the above JS Fiddle code into my code in the SharePoint "Modern Script editor web part".

Here, the FAQ is showing only the last record from the SharePoint List.

<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>

OUTPUT:

SharePoint List view:

enter image description here

Resulting Output with Error:

enter image description here

Expected Output:

Should show all the 3 Lists and I should be able to filter the results (like in the JS Fiddle example).

Solution

  • In the function GenerateAccordionFromJson, this line enter image description here

    change to accordionContent = accordionContent +'<div class="panel-group" id="accord">' + ....