Add package search suggestions using datalist

Author: pierres

internal/ui/packagelist/templates.templ

@@ -57,12 +57,14 @@ templ PackagesContent(list *packages.PackagePopularityList, query string, curren
 				name="query"
 				placeholder="Search packages"
 				value={ query }
+				list="package-suggestions"
 			/>
 			if compare != "" {
 				<input type="hidden" name="compare" value={ compare }/>
 			}
 			<button class="btn btn-primary d-none d-sm-block" type="submit">Search</button>
 		</div>
+		<datalist id="package-suggestions"></datalist>
 	</form>
 	if len(list.PackagePopularities) > 0 {
 		@PackageTable(list.PackagePopularities, query, currentOffset, limit, compare)

src/main.ts

@@ -5,3 +5,4 @@ import "./components/country-map.ts";
 import "./compare-packages-redirect";
 import "./packages-redirect";
 import "./tab-nav";
+import "./package-search-suggest";

src/package-search-suggest.ts

@@ -0,0 +1,64 @@
+const DEBOUNCE_MS = 200;
+const MIN_QUERY_LENGTH = 2;
+const SUGGESTION_LIMIT = 10;
+
+const input = document.querySelector<HTMLInputElement>("#package-search");
+const datalist = document.querySelector<HTMLDataListElement>(
+    "#package-suggestions",
+);
+
+if (input && datalist) {
+    let controller: AbortController | null = null;
+    let timer: ReturnType<typeof setTimeout>;
+
+    const isSuggestion = (query: string): boolean =>
+        datalist.querySelector(`option[value="${CSS.escape(query)}"]`) !== null;
+
+    const fetchSuggestions = async (
+        query: string,
+        signal: AbortSignal,
+    ): Promise<string[]> => {
+        const res = await fetch(
+            `/api/packages?query=${encodeURIComponent(query)}&limit=${SUGGESTION_LIMIT}`,
+            { signal },
+        );
+        const data = await res.json();
+        return data.packagePopularities.map((p: { name: string }) => p.name);
+    };
+
+    const updateDatalist = (names: string[]): void => {
+        datalist.innerHTML = names
+            .map((name) => `<option value="${name}"></option>`)
+            .join("");
+    };
+
+    input.addEventListener("input", () => {
+        clearTimeout(timer);
+        const query = input.value.trim();
+
+        if (isSuggestion(query)) {
+            input.form?.submit();
+            return;
+        }
+
+        if (query.length < MIN_QUERY_LENGTH) {
+            updateDatalist([]);
+            return;
+        }
+
+        timer = setTimeout(async () => {
+            controller?.abort();
+            controller = new AbortController();
+
+            try {
+                const names = await fetchSuggestions(query, controller.signal);
+                updateDatalist(names);
+            } catch (e) {
+                if (e instanceof DOMException && e.name === "AbortError") {
+                    return;
+                }
+                throw e;
+            }
+        }, DEBOUNCE_MS);
+    });
+}