john-okeefe
46e0744802
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
29 lines
681 B
TypeScript
29 lines
681 B
TypeScript
export interface TagSuggestion {
|
|
value: string;
|
|
count: number;
|
|
}
|
|
|
|
export async function searchTagSuggestions(
|
|
query: string,
|
|
libraryId: string,
|
|
): Promise<TagSuggestion[]> {
|
|
if (!query || query.length < 2 || !libraryId) return [];
|
|
|
|
const token = localStorage.getItem("token");
|
|
if (!token) return [];
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`/api/media-items/search?tags=${encodeURIComponent(query)}&library_id=${libraryId}&limit=20`,
|
|
{ headers: { Authorization: `Bearer ${token}` } },
|
|
);
|
|
|
|
if (!response.ok) return [];
|
|
|
|
const data = await response.json();
|
|
return (data.results || []) as TagSuggestion[];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|