cdransf/coryd.dev
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(search.html): update to disable and show loading state w/load more button; improve fuzzy search + debounce

Browse source
This commit is contained in:
Cory Dransfeldt 2025-05-29 10:03:35 -07:00
parent 63db0cf32a
commit 8a6e84cb35
No known key found for this signature in database
35 changed files with 119 additions and 395 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/pages/static/search.html
View file

@ -84,7 +84,8 @@ description: Search through posts and other content on my site.
searchOptions: {
fields: ["title", "tags"],
prefix: true,
fuzzy: 0.1,
fuzzy: 0.3,
combineWith: "OR",
boost: { title: 5, tags: 2, description: 1 },
},
});
@ -94,12 +95,11 @@ description: Search through posts and other content on my site.
const $input = document.querySelector(".search__form--input");
const $results = document.querySelector(".search__results");
const $loadMoreButton = document.querySelector(".search__load-more");
const $typeCheckboxes = document.querySelectorAll(
'.search__form--type input[type="checkbox"]',
);
const $typeCheckboxes = document.querySelectorAll('.search__form--type input[type="checkbox"]');
$form.removeAttribute("action");
$form.removeAttribute("method");
if ($fallback) $fallback.remove();
const PAGE_SIZE = 10;
@ -107,7 +107,7 @@ description: Search through posts and other content on my site.
let currentResults = [];
let total = 0;
let debounceTimeout;
let isLoading = false;
const parseMarkdown = (markdown) =>
markdown
? markdown
@ -117,7 +117,6 @@ description: Search through posts and other content on my site.
.replace(/\n/g, "<br>")
.replace(/[#*_~`]/g, "")
: "";
const truncateDescription = (markdown, maxLength = 225) => {
const plainText =
new DOMParser().parseFromString(parseMarkdown(markdown), "text/html")
@ -126,12 +125,29 @@ description: Search through posts and other content on my site.
? `${plainText.substring(0, maxLength)}...`
: plainText;
};
const renderSearchResults = (results) => {
const resultHTML = results
.map(
({ title, url, description, type, total_plays }) => `
<li class="search__results--result">
<li class="search__results--result">
<h3>
<a href="${url}">${title}</a>
${type === "artist" && total_plays > 0 ? ` <mark>${total_plays} plays</mark>` : ""}
</h3>
<p>${truncateDescription(description)}</p>
</li>
`,
)
.join("");
$results.innerHTML = resultHTML || '<li class="search__results--no-results">No results found.</li>';
$results.style.display = "block";
};
const appendSearchResults = (results) => {
const newResultsHTML = results
.map(
({ title, url, description, type, total_plays }) => `
<li class="search__results--result">
<h3>
<a href="${url}">${title}</a>
${
@ -140,45 +156,50 @@ description: Search through posts and other content on my site.
: ""
}
</h3>
<p>${truncateDescription(description)}</p>
</li>
`,
<p>${truncateDescription(description)}</p>
</li>
`,
)
.join("");
$results.innerHTML =
resultHTML ||
'<li class="search__results--no-results">No results found.</li>';
$results.style.display = "block";
$results.insertAdjacentHTML("beforeend", newResultsHTML);
};
const getSelectedTypes = () => Array.from($typeCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
const loadSearchIndex = async (query, types, page) => {
isLoading = true;
$loadMoreButton.disabled = true;
$loadMoreButton.textContent = "Loading...";
try {
const typeQuery = types.join(",");
const response = await fetch(
`https://www.coryd.dev/api/search.php?q=${query}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`,
`https://www.coryd.dev/api/search.php?q=${encodeURIComponent(
query,
)}&type=${typeQuery}&page=${page}&pageSize=${PAGE_SIZE}`,
);
const data = await response.json();
total = data.total || 0;
const formattedResults = (data.results || []).map((item) => ({
...item,
id: item.result_id,
}));
miniSearch.removeAll();
miniSearch.addAll(formattedResults);
return formattedResults;
} catch (error) {
console.error("Error fetching search data:", error);
return [];
} finally {
isLoading = false;
$loadMoreButton.disabled = false;
$loadMoreButton.textContent = "Load More";
}
};
const getSelectedTypes = () =>
Array.from($typeCheckboxes)
.filter((cb) => cb.checked)
.map((cb) => cb.value);
const updateSearchResults = (results) => {
if (currentPage === 1) {
renderSearchResults(results);
@ -189,58 +210,45 @@ description: Search through posts and other content on my site.
currentPage * PAGE_SIZE < total ? "block" : "none";
};
const appendSearchResults = (results) => {
const newResultsHTML = results
.map(
({ title, url, description, type, total_plays }) => `
<li class="search__results--result">
<h3>
<a href="${url}">${title}</a>
${
type === "artist" && total_plays > 0
? ` <mark>${total_plays} plays</mark>`
: ""
}
</h3>
<p>${truncateDescription(description)}</p>
</li>
`,
)
.join("");
$results.insertAdjacentHTML("beforeend", newResultsHTML);
};
const handleSearch = async () => {
const query = $input.value.trim();
if (!query) {
renderSearchResults([]);
$loadMoreButton.style.display = "none";
return;
}
$results.innerHTML = '<li class="search__results--loading">Searching...</li>';
$results.style.display = "block";
$loadMoreButton.style.display = "none";
const results = await loadSearchIndex(query, getSelectedTypes(), 1);
currentResults = results;
currentPage = 1;
updateSearchResults(results);
};
$input.addEventListener("input", () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(handleSearch, 150);
debounceTimeout = setTimeout(handleSearch, 300);
});
$typeCheckboxes.forEach((cb) =>
cb.addEventListener("change", handleSearch),
);
$typeCheckboxes.forEach((cb) => cb.addEventListener("change", handleSearch));
$loadMoreButton.addEventListener("click", async () => {
if (isLoading) return;
currentPage++;
const nextResults = await loadSearchIndex(
$input.value.trim(),
getSelectedTypes(),
currentPage,
);
const nextResults = await loadSearchIndex($input.value.trim(), getSelectedTypes(), currentPage);
currentResults = [...currentResults, ...nextResults];
updateSearchResults(nextResults);
});
})();