考虑以下可能的解决方案。
工作示例:
https://jsfiddle.net/Twisty/6v4h7fL3/73/
切换小提琴使用jquery 3.3.1和jquery ui 1.12.1。最好尽可能使用最新版本。代码应该可以使用一些未经测试的旧版本。
HTML
<div id="contactlist">
<form id="search-form" class="ui-widget">
<p class="ui-widget-content">
<label for="term">Search:</label> <input type="text" id="term" class="ui-widget ui-corner-all" /> <button type="submit" id="btn-go" class="ui-widget ui-button ui-corner-all">Find</button>
</p>
</form>
<div id="accordion">
</div>
</div>
添加了搜索字段表单。使用窗体事件回调
submit
允许用户点击
进入
或者点击按钮。我怀疑很多像我这样的用户输入了一些东西然后点击
进入
.
JavaScript
$(function() {
var departmentlist = [];
var a = $("#accordion");
function wrapText(term, obj) {
var myText = obj.html().toString();
var re = new RegExp(term, "g");
var wObj = $("<span>", {
class: "found ui-state-highlight"
}).html(term);
var w = wObj.prop("outerHTML");
var newText = myText.replace(re, w);
console.log("Wrap:", re, myText, newText);
obj.html(newText);
}
$.each(contacts, function(i, contact) {
//insert the departments
if (contact.Title != null && $('#' + contact.Title).length == 0) {
var header = $("<h3>", {
id: contact.Title
}).html(contact.Title).appendTo(a);
var details = $("<div>").appendTo(a);
$("<p>").html(contact.Definition).appendTo(details);
departmentlist.push(contact.Title);
}
});
a.accordion({
collapsible: true,
active: false,
});
$("#search-form").submit(function(e) {
e.preventDefault();
var q = $("#term").val();
$.each(contacts, function(k, v) {
if (v.Definition.indexOf(q) >= 0) {
// Found
console.log("'" + q + "' found under " + v.Title + " (" + k + ")");
// Collapse all
a.accordion("option", "active", false);
// Active Section with found item
a.accordion("option", "active", k);
a.find(".found").removeClass("found ui-state-highlight");
wrapText(q, $(".ui-accordion-content-active"));
return false;
}
});
});
});
这个
wrapText()
对要搜索的文本进行某种基本的替换,并用
<span>
用于突出显示。它接受术语和jquery对象,该对象包含应搜索和突出显示的文本。
我改进了您使用的构造代码,使其更像jquery。一旦一切就绪,我们就申请
.accordion()
.
当输入搜索并提交表单时,我们将查找查询的第一个匹配项,打开它的容器并突出显示文本。
这有点又快又脏。如果你需要的话,可以通过一些方法来改进它。例如,现在它的大小写是不必要的。所以如果你想
testing
你不会得到任何点击,但是如果你搜索
Testing
,它会起作用的。
更新
如果您在sharepoint中运行它,而您对html没有那么多的控制权,那么这会有帮助。
$(function() {
function GetItems() {
var siteURL = _spPageContextInfo.webServerRelativeUrl;
//var siteURL = "https://reqres.in/api/unknown" //Non-SharePoint URL
$.ajax({
url: siteURL + "/_api/web/lists/GetByTitle('glossary of terms')/items", //change the list name
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
},
success: function(data) {
if (data.d.results.length > 0) {
GenerateAccordionFromJson(data.d.results, true, $("#accordion"));
$("#accordion").accordion({
collapsible: true,
active: false,
});
} else {
$('#accordion').append("<span>No Records Found.</span>");
}
},
error: function(error) {
console.log(JSON.stringify(error));
}
});
}
function wrapText(term, tObj) {
var oldText = tObj.html();
var re = new RegExp(term, "g");
var newText = oldText.replace(term, "<span class='found highlight'>" + term + "</span>");
tObj.html(newText);
}
function GenerateAccordionFromJson(json, search, tObj) {
if (search == undefined) {
search = false;
}
if (tObj == undefined || tObj.length < 1) {
tObj = $("<div>", {
class: "items",
id: "accordion" + ($("#accordion").length ? "-" + $("#accordion").length : "")
}).appendTo($("body"));
}
if (search) {
var form = $("<form>", {
class: "search-form"
}).submit(function(e) {
e.preventDefault();
var q = $(".search-term", this).val();
var aObj = $(this).next("div");
var stacks = [];
$(".found").removeClass("found highlight");
$(".ui-accordion-content", aObj).each(function(ind, el) {
stacks.push($(el).text().trim());
});
$.each(stacks, function(i, s) {
if (s.indexOf(q) >= 0) {
aObj.accordion("option", "active", false);
aObj.accordion("option", "active", i);
wrapText(q, $(".ui-accordion-content-active", aObj));
}
});
}).insertBefore(tObj);
$("<p>").html("Search:").appendTo(form);
$("<input>", {
type: "text",
class: "search-term"
}).appendTo($("p", form));
$("<button>", {
type: "submit",
class: "search-btn-go"
}).appendTo($("p", form));
}
$.each(json, function(key, row) {
$("<h3>").html(row.Title).appendTo(tObj);
$("<div>").html("<p>" + row.Definition + "</p>").appendTo(tObj);
});
}
});
更新2
确保在头部加载正确的库。显示您正在使用:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
这将加载同一个库两次,只是先加载“min”版本。我会把第二个移走。
我不知道sp是否使用jquery。如果尚未加载,则需要确保将其包含在标题中。
如果没有,可以执行以下操作:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
正如您所提到的,在您的评论中,我忘记包括初始函数的最后一次运行:
GetItems();
在关闭最后一个包装器之前添加这个,以确保它被执行。
更新3
请尝试以下脚本代码:
$(function() {
var n = new Date();
function log(msg) {
var t = new Date();
var d = t - n;
console.log(d, msg);
}
function GetItems() {
var siteURL = _spPageContextInfo.webServerRelativeUrl;
log("GetItems: Start: " + siteURL);
$.ajax({
url: siteURL + "/_api/web/lists/GetByTitle('glossary of terms')/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));
$("#accordion").accordion({
collapsible: true,
active: false,
});
} else {
$('#accordion').append("<span>No Records Found.</span>");
}
},
error: function(error) {
log("GetItems: Error: " + JSON.stringify(error));
}
});
log("GetItems: Complete");
}
function GenerateAccordionFromJson(objArray) {
log("GenAccord: Started");
var accordionContent = "";
for (var i = 0; i < objArray.length; i++) {
accordionContent += '<h3>' + objArray[i].Title + '</h3>';
accordionContent += '<div><p>' + objArray[i].Definition + '</p></div>';
}
log("GenAccord: Complete");
return accordionContent;
}
GetItems();
});
然后,您可以查看控制台,并应看到所有操作都在运行。如果没有详细信息,请查找警报或错误。
希望能有所帮助。
