104 lines
2.8 KiB
JavaScript
104 lines
2.8 KiB
JavaScript
(function () {
|
||
"use strict";
|
||
|
||
const input = document.getElementById("search-input");
|
||
const results = document.getElementById("search-results");
|
||
if (!input || !results) return;
|
||
|
||
let pagefind = null;
|
||
let timer = null;
|
||
|
||
async function getPagefind() {
|
||
if (!pagefind) pagefind = await import("/pagefind/pagefind.js");
|
||
return pagefind;
|
||
}
|
||
|
||
function escapeHtml(str) {
|
||
const div = document.createElement("div");
|
||
div.textContent = str;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
function render(items) {
|
||
if (!items.length) {
|
||
results.innerHTML = '<p class="search-empty">Keine Treffer.</p>';
|
||
results.hidden = false;
|
||
return;
|
||
}
|
||
results.innerHTML = items
|
||
.map((it) => {
|
||
// excerpt enthält bereits <mark> von Pagefind – als HTML rendern
|
||
const excerpt = it.excerpt
|
||
? `<span class="search-excerpt">${it.excerpt}</span>`
|
||
: "";
|
||
const sub = (it.sub_results || [])
|
||
.slice(0, 3)
|
||
.map(
|
||
(s) =>
|
||
`<li><a href="${s.url}">${escapeHtml(s.title)}</a>` +
|
||
(s.excerpt ? `<span class="search-excerpt">${s.excerpt}</span>` : "") +
|
||
`</li>`
|
||
)
|
||
.join("");
|
||
return (
|
||
`<a class="search-item" href="${it.url}">` +
|
||
`<span class="search-title">${escapeHtml(it.title)}</span>${excerpt}</a>` +
|
||
(sub ? `<ul class="search-sub">${sub}</ul>` : "")
|
||
);
|
||
})
|
||
.join("");
|
||
results.hidden = false;
|
||
}
|
||
|
||
async function doSearch(query) {
|
||
query = query.trim();
|
||
if (query.length < 2) {
|
||
results.hidden = true;
|
||
results.innerHTML = "";
|
||
return;
|
||
}
|
||
try {
|
||
const pf = await getPagefind();
|
||
const search = await pf.search(query);
|
||
const items = [];
|
||
for (const res of search.results.slice(0, 8)) {
|
||
const data = await res.data();
|
||
items.push({
|
||
url: data.url,
|
||
title: (data.meta && data.meta.title) || data.url,
|
||
excerpt: data.excerpt,
|
||
sub_results: (data.sub_results || []).map((s) => ({
|
||
url: s.url,
|
||
title: s.title,
|
||
excerpt: s.excerpt,
|
||
})),
|
||
});
|
||
}
|
||
render(items);
|
||
} catch (e) {
|
||
results.innerHTML = '<p class="search-empty">Suche nicht verfügbar.</p>';
|
||
results.hidden = false;
|
||
}
|
||
}
|
||
|
||
input.addEventListener("input", () => {
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() => doSearch(input.value), 150);
|
||
});
|
||
|
||
input.addEventListener("focus", () => {
|
||
if (input.value.trim().length >= 2) doSearch(input.value);
|
||
});
|
||
|
||
document.addEventListener("click", (e) => {
|
||
if (!e.target.closest(".search")) results.hidden = true;
|
||
});
|
||
|
||
document.addEventListener("keydown", (e) => {
|
||
if (e.key === "Escape") {
|
||
results.hidden = true;
|
||
input.blur();
|
||
}
|
||
});
|
||
})();
|