Load first suggestion when pressing enter

static/search-suggestions.js

@@ -1,4 +1,4 @@
-import {h, htm, render, signal, computed, effect} from "preact"
+import {h, htm, render, signal, computed, effect, useSignalEffect} from "preact"
 const html = htm.bind(h)
 const classNames = classArr => classArr.filter(el => el).join(" ")
 
@@ -13,6 +13,7 @@ const query = signal("")
 const focus = signal(false)
 const st = signal("ready")
 const suggestions = signal([])
+const enterWasLastKey = signal(false)
 
 // processing functions
 
@@ -49,6 +50,12 @@ function acceptSuggestion(hit) {
 // suggestion list view
 
 function Suggestion(hit) {
+	useSignalEffect(() => {
+		if (enterWasLastKey.value && st.value === "ready") {
+			enterWasLastKey.value.preventDefault()
+			acceptSuggestion(hit)
+		}
+	})
 	return html`<li class="bw-ss__item"><button type="button" class="bw-ss__button" onClick=${() => acceptSuggestion(hit)}>${hit.title}</button></li>`
 }
 
@@ -79,9 +86,15 @@ window.addEventListener("pageshow", () => {
 	st.value = "ready" // unlock results from changing after returning to page
 })
 
+effect(() => {
+	if (enterWasLastKey.value && st.value === "loading") {
+		enterWasLastKey.value.preventDefault() // wait for results before going
+	}
+})
+
 function SuggestionInput() {
 	return html`
-<input type="text" name="q" id="bw-search-input" autocomplete="off" onInput=${e => query.value = e.target.value} value=${query.value} class=${classNames(["bw-ss__input", `bw-ss__input--${st.value}`])} />`
+<input type="text" name="q" id="bw-search-input" autocomplete="off" onInput=${e => query.value = e.target.value} onKeyDown=${e => enterWasLastKey.value = e.key === "Enter" && e} value=${query.value} class=${classNames(["bw-ss__input", `bw-ss__input--${st.value}`])} />`
 }
 
 render(html`<${SuggestionInput} />`, eInput)