feat: add autocomplete dropdown UI with keyboard nav
- 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:
parent
7a2ca8672e
commit
e90f6c0876
3 changed files with 176 additions and 1 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue