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

package-lock.json

@@ -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",

package.json

@@ -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": {

src/pages/static/search.html

@@ -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(
+      const $typeCheckboxes = document.querySelectorAll('.search__form--type input[type="checkbox"]');
-        '.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>
+                <p>${truncateDescription(description)}</p>
-            </li>
+              </li>
-          `,
+            `,
           )
           .join("");
-
+        $results.insertAdjacentHTML("beforeend", newResultsHTML);
-        $results.innerHTML =
-          resultHTML ||
-          '<li class="search__results--no-results">No results found.</li>';
-        $results.style.display = "block";
       };
-
+      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) =>
+      $typeCheckboxes.forEach((cb) => cb.addEventListener("change", handleSearch));
-        cb.addEventListener("change", handleSearch),
-      );
 
       $loadMoreButton.addEventListener("click", async () => {
+        if (isLoading) return;
+
         currentPage++;
-        const nextResults = await loadSearchIndex(
+
-          $input.value.trim(),
+        const nextResults = await loadSearchIndex($input.value.trim(), getSelectedTypes(), currentPage);
-          getSelectedTypes(),
+
-          currentPage,
-        );
         currentResults = [...currentResults, ...nextResults];
+
         updateSearchResults(nextResults);
       });
     })();