feat(bookshelf): replace broken datalist tag filter with custom autocomplete
The HTML <datalist> approach for tag autocomplete was unreliable across browsers — showed empty suggestions or no dropdown at all. Replace with a custom Alpine.js dropdown: - New tag-dropdown.ts shared module: searchTagSuggestions() queries /api/media-items/search?tags=...&library_id=... and returns results - Bookshelf: absolute-positioned dropdown below tags_filter input, shows tag name + book count per suggestion - Keyboard navigation: ArrowUp/Down to highlight, Enter to select, Escape to close - Click suggestion to populate the filter input
This commit is contained in:
@@ -93,7 +93,7 @@ templ BookShelf(
|
||||
<datalist id="author-datalist"></datalist>
|
||||
</div>
|
||||
<!-- Tags Filter with Autocomplete -->
|
||||
<div class="flex-1 min-w-[150px]">
|
||||
<div class="flex-1 min-w-[150px] relative">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Tags</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -101,10 +101,29 @@ templ BookShelf(
|
||||
placeholder="Filter by tags"
|
||||
class="w-full px-3 py-2 border rounded-lg"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
list="tags-datalist"
|
||||
@input.debounce.300ms="if($el.value.length >= 2) fetchTagValues($el)"
|
||||
@keydown="onTagFilterKeydown($event)"
|
||||
@blur="hideTagDropdown()"
|
||||
/>
|
||||
<datalist id="tags-datalist"></datalist>
|
||||
<div
|
||||
x-show="showTagDropdown"
|
||||
x-transition
|
||||
class="absolute z-50 mt-1 w-full rounded-lg shadow-lg border max-h-48 overflow-y-auto"
|
||||
style="background-color: var(--bg-primary); border-color: var(--border);"
|
||||
>
|
||||
<template x-for="sug in tagSuggestions" :key="sug.value">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-3 py-2 text-sm flex justify-between items-center"
|
||||
:class="tagHighlightIndex === tagSuggestions.indexOf(sug) ? 'opacity-80' : ''"
|
||||
:style="tagHighlightIndex === tagSuggestions.indexOf(sug) ? 'background-color: var(--bg-secondary); color: var(--text-primary);' : 'color: var(--text-primary);'"
|
||||
@click="selectTagSuggestion(sug.value)"
|
||||
>
|
||||
<span x-text="sug.value"></span>
|
||||
<span class="text-xs" style="color: var(--text-secondary);" x-text="sug.count + ' books'"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
// <!-- Genre Filter with Autocomplete -->
|
||||
// <div class="flex-1 min-w-[150px]">
|
||||
|
||||
Reference in New Issue
Block a user