From 07c60f4f45685bc97510e4938aef0f36b63a542e Mon Sep 17 00:00:00 2001 From: Lia Lenckowski Date: Wed, 9 Aug 2023 23:46:30 +0200 Subject: css/infrastructure for bang search suggestions dropdown --- frontend/start.ts | 38 +++++++++++++++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 3 deletions(-) (limited to 'frontend/start.ts') 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) + } + }) +} -- cgit v1.2.3-70-g09d2