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
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue