Рассмотрим следующее возможное решение.
Рабочий пример: 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 позволяет пользователю нажать Enter или нажать кнопку.Я подозреваю, что многие пользователи, такие как я, вводят что-то и нажимают Введите .
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();
});
После этого вы можете просмотреть консоль и увидеть все запущенные операции.Если подробностей нет, ищите оповещения или ошибки.
Надеюсь, это поможет.