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:
Franz Kafka 2026-03-22 00:20:43 +00:00
parent 7a2ca8672e
commit a2f8077669
3 changed files with 176 additions and 1 deletions

View file

@ -421,6 +421,63 @@ footer a:hover {
display: block;
}
/* Autocomplete dropdown */
#search {
position: relative;
}
#autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-base-background);
border: 1px solid var(--color-search-border);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
max-height: 320px;
overflow-y: auto;
display: none;
}
#autocomplete-dropdown.open {
display: block;
}
.autocomplete-suggestion {
padding: 0.6rem 1rem;
cursor: pointer;
font-size: 0.95rem;
color: var(--color-base-font);
border-bottom: 1px solid var(--color-result-border);
transition: background 0.15s;
}
.autocomplete-suggestion:last-child {
border-bottom: none;
}
.autocomplete-suggestion:hover,
.autocomplete-suggestion.active {
background: var(--color-header-background);
}
.autocomplete-suggestion mark {
background: none;
color: var(--color-link);
font-weight: 600;
}
.autocomplete-footer {
padding: 0.4rem 1rem;
font-size: 0.75rem;
color: var(--color-suggestion);
border-top: 1px solid var(--color-result-border);
background: var(--color-header-background);
}
/* Responsive */
@media (max-width: 768px) {
#results {