css/infrastructure for bang search suggestions dropdown

2 files changed, 66 insertions, 8 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)
+        }
+    })
+}
diff --git a/frontend/style.sass b/frontend/style.sass
index ca3921b..31827b2 100644
--- a/frontend/style.sass
+++ b/frontend/style.sass
@@ -41,7 +41,7 @@ section.engine-select
         flex-direction: row
         flex-wrap: wrap
     li
-        background-color: #000000
+        background-color: black
         border-radius: 0.5em
         padding: 1em
         margin: 0.5em
@@ -51,6 +51,32 @@ section.engine-select
             transition: background-color 0.1s ease-out
             &:hover
                 background-color: $ac-dark
+        &#select-engine-li
+            position: relative
+        ul.dropdown
+            position: absolute
+            display: none
+            left: 1em
+            padding: 0
+            background-color: $dark
+            background-color: black
+            border: 0.15em solid $light
+            border-top: 0
+            border-radius: 0.5em
+            cursor: pointer
+            li
+                padding: 1em
+                margin: 0
+                background-color: #000
+                &:hover
+                    background-color: $ac-dark
+            p
+                margin: 0
+                &.name
+                    color: white
+                &.bang
+                    color: gray
+                    font-size: small
 
 section.search
     width: 100vw
@@ -92,7 +118,7 @@ label
     margin-right: 1em
 
 a
-  color: $light
-  transition: color 0.2s
-  &:hover
-    color: $ac-light
+    color: $light
+    transition: color 0.2s
+    &:hover
+        color: $ac-light