feat: add autocomplete dropdown UI with keyboard nav
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 11s
Mirror to GitHub / mirror (push) Failing after 3s
Tests / test (push) Successful in 54s

- Inline JS in base.html: debounced fetch from /autocompleter on keyup
- Keyboard nav: arrows to navigate, Enter to select, Esc to close
- Highlight matching prefix in suggestions
- Click to select and submit
- Dropdown positioned absolutely below search input
- Dark mode compatible via existing CSS variables
This commit is contained in:
Franz Kafka 2026-03-22 00:20:43 +00:00
parent 7a2ca8672e
commit e90f6c0876
3 changed files with 176 additions and 1 deletions

View file

@ -3,11 +3,12 @@
<div class="index">
<div class="title"><h1>kafka</h1></div>
<div id="search">
<form method="GET" action="/search" role="search">
<form method="GET" action="/search" role="search" id="search-form">
<input type="text" name="q" id="q" placeholder="Search…" autocomplete="off" autofocus
hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
<button type="submit">Search</button>
</form>
<div id="autocomplete-dropdown"></div>
</div>
</div>
<div id="results"></div>