feat(search.html): update to disable and show loading state w/load more button; improve fuzzy search + debounce
This commit is contained in:
parent
63db0cf32a
commit
ae0247be24
3 changed files with 64 additions and 56 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "8.0.4",
|
||||
"version": "8.1.4",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "8.0.4",
|
||||
"version": "8.1.4",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"minisearch": "^7.1.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "8.0.4",
|
||||
"version": "8.1.4",
|
||||
"description": "The source for my personal site. Built using 11ty (and other tools).",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue