Franz Kafka
a2f8077669
- 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
15 lines
547 B
HTML
15 lines
547 B
HTML
{{define "title"}}{{end}}
|
|
{{define "content"}}
|
|
<div class="index">
|
|
<div class="title"><h1>kafka</h1></div>
|
|
<div id="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>
|
|
{{end}}
|