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,77 @@
+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>;
+    let previousValue = input.value;
+
+    const isSuggestion = (query: string): boolean =>
+        datalist.querySelector(`option[value="${CSS.escape(query)}"]`) !== null;
+
+    const isSelection = (query: string): boolean => {
+        const lengthDiff = query.length - previousValue.length;
+        return lengthDiff > 1 && isSuggestion(query);
+    };
+
+    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.replaceChildren(
+            ...names.map((name) => {
+                const option = document.createElement("option");
+                option.value = name;
+                return option;
+            }),
+        );
+    };
+
+    input.addEventListener("input", () => {
+        clearTimeout(timer);
+        const query = input.value.trim();
+
+        if (isSelection(query)) {
+            input.form?.submit();
+            return;
+        }
+
+        previousValue = query;
+
+        if (query.length < MIN_QUERY_LENGTH) {
+            updateDatalist([]);
+            return;
+        }
+
+        timer = setTimeout(async () => {
+            controller?.abort();
+            controller = new AbortController();
+
+            try {
+                updateDatalist(
+                    await fetchSuggestions(query, controller.signal),
+                );
+            } catch (e) {
+                if (e instanceof DOMException && e.name === "AbortError") {
+                    return;
+                }
+                throw e;
+            }
+        }, DEBOUNCE_MS);
+    });
+}