Sharepoint:如何根据搜索关键字过滤常见问题解答列表
Sharepoint: How to filter FAQ List based on search keyword
我有一个 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 示例中一样)。
在函数 GenerateAccordionFromJson
中,这一行
改为accordionContent = accordionContent +'<div class="panel-group" id="accord">' + ....
我有一个 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 示例中一样)。
在函数 GenerateAccordionFromJson
中,这一行
改为accordionContent = accordionContent +'<div class="panel-group" id="accord">' + ....