Add URL auto-complete to cart search

Author: Sanrax

docs/index.md

@@ -13,9 +13,9 @@ If you'd like to improve this resource or add new carts, feel free to create a p
 
 ## Cart Search
 
-Don't know which page matches your cart? You can search for a matching cart by typing in the URL that appears on the label of your cart into the search box below (results will appear after typing in the entire URL).
+Don't know which page matches your cart? You can search for a matching cart by typing in the URL that appears on the label of your cart into the search box below.
 
-Note that some URLs may have many hardware variants. If multiple results are returned for your cart's URL, you will need to check each page to see which one accurately matches the cart you have. Results are sorted by most common to least common carts, so starting at the first result is a good bet.
+Note that some manufacturers can have many hardware variants. If multiple results are returned for your cart's URL, you will need to check each page to see which one accurately matches the cart you have. Results are sorted by most common to least common carts, so starting at the first result is a good bet.
 
 <div class="cart-search" data-cart-search data-index-url="assets/search/cart-search.json">
 

docs/javascripts/cart-search.js

@@ -7,6 +7,7 @@
   const indexUrl = root.dataset.indexUrl;
 
   let searchData = null;
+  let allKnownUrls = [];
   let activeIndex = -1;
 
   function normalizeCartUrl(value) {
@@ -29,41 +30,57 @@
     }
 
     searchData = await response.json();
+    
+    // Precompute a sorted list of all unique normalized URLs for quick filtering
+    const urlSet = new Set();
+    for (const page of Object.values(searchData.pages)) {
+      (page.matches || []).forEach(url => {
+        urlSet.add(normalizeCartUrl(url));
+      });
+    }
+    allKnownUrls = Array.from(urlSet).sort();
+
     return searchData;
   }
 
   function findResults(query, data) {
     const normalizedQuery = normalizeCartUrl(query);
     if (normalizedQuery.length < 2) return [];
 
-    const results = [];
-  
-    for (const [pageId, page] of Object.entries(data.pages)) {
-      const normalizedMatches = (page.matches || []).map(normalizeCartUrl);
-  
-      const isMatch = normalizedMatches.some((url) => {
-        return url === normalizedQuery;
-      });
-  
-      if (!isMatch) continue;
-  
-      results.push({
-        id: pageId,
-        ...page
+    // Exact match, display the search results
+    if (allKnownUrls.includes(normalizedQuery)) {
+      const pageResults = [];
+      for (const [pageId, page] of Object.entries(data.pages)) {
+        const normalizedMatches = (page.matches || []).map(normalizeCartUrl);
+        if (normalizedMatches.includes(normalizedQuery)) {
+          pageResults.push({ type: "page", id: pageId, ...page });
+        }
+      }
+      
+      pageResults.sort((a, b) => {
+        const rankA = a.rank ?? 9999;
+        const rankB = b.rank ?? 9999;
+        if (rankA !== rankB) return rankA - rankB;
+        return a.title.localeCompare(b.title);
       });
+      
+      // Prepend header for page results
+      pageResults.unshift({ type: "header", value: normalizedQuery });
+      
+      return pageResults;
     }
-  
-    results.sort((a, b) => {
-      const rankA = a.rank ?? 9999;
-      const rankB = b.rank ?? 9999;
-  
-      if (rankA !== rankB) {
-        return rankA - rankB;
-      }
-  
-      return a.title.localeCompare(b.title);
-    });
-  
+
+    // Partial match, display URL suggestions
+    const suggestions = allKnownUrls.filter(url => url.startsWith(normalizedQuery));
+    
+    // Limit to top 5 suggestions
+    const results = suggestions.slice(0, 5).map(url => ({ type: "suggestion", value: url }));
+    
+    // Add footnote if there are more than 5 matches
+    if (suggestions.length > 5) {
+        results.push({ type: "footnote", value: "Suggestions Being Limited to Top 5 Matches" });
+    }
+
     return results;
   }
 
@@ -76,25 +93,75 @@
       return;
     }
 
-    for (const page of results) {
-      const link = document.createElement("a");
-      link.className = "cart-search__result";
-      link.href = page.url;
-
-      const title = document.createElement("span");
-      title.className = "cart-search__title";
-      title.textContent = page.title;
+    for (const item of results) {
+      // Footnotes and headers should not be clickable links
+      const el = document.createElement((item.type === "footnote" || item.type === "header") ? "div" : "a");
+
+      if (item.type === "header") {
+        el.style.padding = "0.45rem 0.9rem";
+        el.style.borderBottom = "1px solid var(--md-default-fg-color--lighter)";
+        el.style.fontSize = "0.8rem";
+        
+        const prefix = document.createTextNode("Matches for ");
+        const boldText = document.createElement("strong");
+        boldText.textContent = item.value;
+        
+        el.appendChild(prefix);
+        el.appendChild(boldText);
+        
+        resultsBox.appendChild(el);
+        continue; // Skip the rest of the styling for this item
+      }
 
-      link.appendChild(title);
+      if (item.type === "footnote") {
+        el.style.padding = "0.5rem 0.9rem";
+        el.style.textAlign = "center";
+        el.style.fontSize = "0.60rem";
+        el.style.color = "var(--md-default-fg-color--light)";
+        el.style.fontStyle = "italic";
+        el.textContent = item.value;
+        resultsBox.appendChild(el);
+        continue; // Skip the rest of the styling for this item
+      }
 
-      if (page.subtitle) {
-        const subtitle = document.createElement("span");
-        subtitle.className = "cart-search__subtitle";
-        subtitle.textContent = page.subtitle;
-        link.appendChild(subtitle);
+      el.className = "cart-search__result";
+
+      if (item.type === "page") {
+        // Standard cart page result
+        el.href = item.url;
+        
+        const title = document.createElement("span");
+        title.className = "cart-search__title";
+        title.textContent = item.title;
+        el.appendChild(title);
+
+        if (item.subtitle) {
+          const subtitle = document.createElement("span");
+          subtitle.className = "cart-search__subtitle";
+          subtitle.textContent = item.subtitle;
+          el.appendChild(subtitle);
+        }
+      } else if (item.type === "suggestion") {
+        // URL autocomplete suggestion
+        el.style.cursor = "pointer";
+        
+        const title = document.createElement("span");
+        title.className = "cart-search__title";
+        title.textContent = item.value;
+        el.appendChild(title);
+
+        // Accept a suggestion
+        el.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation(); // Prevent the document click listener from hiding the results box
+          
+          input.value = item.value;
+          input.dispatchEvent(new Event("input")); // Trigger exact match state
+          input.focus();
+        });
       }
 
-      resultsBox.appendChild(link);
+      resultsBox.appendChild(el);
     }
 
     resultsBox.hidden = false;