From ec6996192c3cc41e5de3ff48151d5fe97adab18d Mon Sep 17 00:00:00 2001
From: Heidi <clippii@protonmail.com>
Date: Sat, 16 May 2026 11:52:01 +0100
Subject: [PATCH] fix

---
 src/App.jsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index d1a3c2e..9238f53 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1035,6 +1035,24 @@ function AppContent() {
   }, [route.page, route.teamName])
 
   const topTeamName = bestTeamName(teams[0])
+  const teamSuggestions = useMemo(() => {
+    const query = teamQuery.trim().toLowerCase()
+    const seen = new Set()
+
+    return teams
+      .map((team) => {
+        const name = bestTeamName(team)
+        const aliases = [team.tag_name, team.short_name, team.long_name].filter(Boolean)
+        return { name, detail: team.long_name || team.short_name || '', aliases }
+      })
+      .filter(({ name, aliases }) => {
+        if (!name || seen.has(name)) return false
+        seen.add(name)
+        if (!query) return true
+        return aliases.some((alias) => String(alias).toLowerCase().includes(query))
+      })
+      .slice(0, 10)
+  }, [teamQuery, teams])
   const searchPlaceholder =
     searchHint.status === 'ready'
       ? `Found ${searchHint.name}`
@@ -1134,6 +1152,7 @@ function AppContent() {
             onTeamSearch={handleTeamSearch}
             searchPlaceholder={searchPlaceholder}
             setTeamQuery={setTeamQuery}
+            teamSuggestions={teamSuggestions}
             teams={teams}
             teamQuery={teamQuery}
           />
@@ -1505,6 +1524,7 @@ function Landing({
   onTeamSearch,
   searchPlaceholder,
   setTeamQuery,
+  teamSuggestions,
   teams,
   teamQuery,
 }) {
@@ -1556,10 +1576,16 @@ function Landing({
               >
                 <input
                   className="min-w-0 rounded-md border border-border bg-bg px-4 py-3 text-sm outline-none transition focus:border-ring focus:shadow-[0_0_0_3px_var(--color-shadow)]"
+                  list="team-search-suggestions"
                   placeholder={searchPlaceholder}
                   value={teamQuery}
                   onChange={(event) => setTeamQuery(event.target.value)}
                 />
+                <datalist id="team-search-suggestions">
+                  {teamSuggestions.map((team) => (
+                    <option key={team.name} label={team.detail} value={team.name} />
+                  ))}
+                </datalist>
                 <button
                   className="rounded-md bg-fury-cyan px-5 py-3 text-sm font-semibold text-text transition hover:bg-fury-aqua"
                   type="submit"