css/infrastructure for bang search suggestions dropdown

1 files changed, 35 insertions, 3 deletions

diff --git a/frontend/start.ts b/frontend/start.ts
index c7d50d2..3b4ca1e 100644
--- a/frontend/start.ts
+++ b/frontend/start.ts
@@ -30,22 +30,54 @@ export function section_engine_select() {
         }
     })
 
+    const searchResults = e("ul", {class: "dropdown"})
+
     const input = e("input", {type: "text"})
     input.addEventListener("keydown", ev => {
         if (ev.code == "Enter") select(input.value)
     })
+    input.addEventListener("keyup", _ => {
+        setSearchResults(searchResults, input)
+    })
 
     const submit = e("button", {}, "Select")
     submit.addEventListener("click", () => select(input.value))
 
-    listing.append(e("li", {},
+    const inputLi = e("li", {id: "select-engine-li"},
         e("label", {}, "Select other engine by bang:"),
         input,
-        submit
-    ))
+        submit,
+        searchResults
+    )
+
+    listing.append(inputLi)
 
     return e("section", { class: "engine-select" },
         e("h2", {}, "Select a search engine"),
         listing
     )
 }
+
+function setSearchResults(ul, input) {
+    bangs.then(bangs => {
+        ul.innerHTML = ""
+
+        let results = bangs[input.value] ? [bangs[input.value]] : []
+
+        if (results.length === 0)
+            ul.style.display = "none"
+        else {
+            ul.style.display = "flex"
+            for (const r of results) {
+                const li = e("li", {},
+                    e("p", {class: "name"}, r.name),
+                    e("p", {class: "bang"}, "TODO"))
+                li.addEventListener("click", () => {
+                    input.value = "TODO"
+                })
+                ul.appendChild(li)
+            }
+            console.log(ul)
+        }
+    })
+}