1 files changed, 39 insertions, 14 deletions

diff --git a/frontend/start.ts b/frontend/start.ts
index 838fd7c..1c02192 100644
--- a/frontend/start.ts
+++ b/frontend/start.ts
@@ -1,6 +1,7 @@
-import { e } from "./helper.ts";
-import { bangs } from "./query.ts";
+import { e } from "./helper.ts"
+import { bangs } from "./query.ts"
 import { status } from "./ui.ts"
+import Fuse from "https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.esm.js"
 
 export function section_info_start() {
     return e("section", { class: "info" },
@@ -18,7 +19,7 @@ export function section_info_start() {
 
 export function section_engine_select() {
     const select = async (e: string) => {
-        const engine = e.toLowerCase();
+        const engine = e.toLowerCase()
         if (!(await bangs)[engine]) return status("error", `Engine ${JSON.stringify(e)} does not exist.`)
         window.location.hash = `#${e}`
     }
@@ -30,19 +31,20 @@ export function section_engine_select() {
         }
     })
 
+
+    const submit = e("button", {}, "Select")
+    submit.addEventListener("click", () => select(input.value))
+
     const searchResults = e("ul", {class: "dropdown"})
 
-    const input = e("input", {type: "text"})
+    const input = e("input", {type: "search"})
     input.addEventListener("keydown", ev => {
         if (ev.code == "Enter") select(input.value)
     })
     input.addEventListener("keyup", _ => {
-        setSearchResults(searchResults, input)
+        setSearchResults(searchResults, input, submit)
     })
 
-    const submit = e("button", {}, "Select")
-    submit.addEventListener("click", () => select(input.value))
-
     const manualInput = e("div", {id: "engine-select-manual"},
         e("label", {}, "Search engines:"),
         input,
@@ -57,26 +59,49 @@ export function section_engine_select() {
     )
 }
 
-function setSearchResults(ul, input) {
-    bangs.then(bangs => {
+// TODO fuse is a bit slow; this search function may hinder fast typing
+let bangsSearch: Promise<any> = undefined;
+
+function setSearchResults(ul, input, submit) {
+    if (bangsSearch === undefined) {
+        bangsSearch = bangs.then(bangs => {
+            let searchSpace = []
+            for (let k in bangs) {
+                searchSpace.push({
+                    bang: k,
+                    name: bangs[k].name,
+                    url:  bangs[k].url
+                })
+            }
+            return new Fuse(searchSpace, {
+                keys: ["bang", "name"],
+                minMatchCharLength: 3
+            })
+        })
+    }
+
+    bangsSearch.then(fuse => {
         ul.innerHTML = ""
 
         let results = bangs[input.value] ? [bangs[input.value]] : []
+        results = fuse.search(input.value).slice(0, 5)
 
         if (results.length === 0)
             ul.style.display = "none"
         else {
             ul.style.display = "flex"
             for (const r of results) {
+                const it = r.item
+
                 const li = e("li", {},
-                    e("p", {class: "name"}, r.name),
-                    e("p", {class: "bang"}, "TODO"))
+                    e("p", {class: "name"}, it.name),
+                    e("p", {class: "bang"}, it.bang))
                 li.addEventListener("click", () => {
-                    input.value = "TODO"
+                    input.value = it.bang
+                    submit.click()
                 })
                 ul.appendChild(li)
             }
-            console.log(ul)
         }
     })
 }