feat: add debounced search dropdown with quick results

This commit is contained in:
2026-04-06 22:58:40 +02:00
parent da88c286f2
commit 6495bc733a
6 changed files with 226 additions and 5 deletions

View File

@@ -1,6 +1,7 @@
package anime
import (
"encoding/json"
"log"
"net/http"
"strconv"
@@ -124,3 +125,48 @@ func (h *Handler) HandleAPIAnimeRelations(w http.ResponseWriter, r *http.Request
relations := h.svc.GetRelations(id)
templates.AnimeRelationsList(relations).Render(r.Context(), w)
}
func (h *Handler) HandleQuickSearch(w http.ResponseWriter, r *http.Request) {
query := r.URL.Query().Get("q")
if query == "" {
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusOK)
json.NewEncoder(w).Encode([]interface{}{})
return
}
res, err := h.svc.Search(query, 1)
if err != nil {
log.Printf("quick search error: %v", err)
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusInternalServerError)
return
}
// Limit to 10 results
results := res.Animes
if len(results) > 10 {
results = results[:10]
}
type SearchResult struct {
ID int `json:"id"`
Title string `json:"title"`
Type string `json:"type"`
Image string `json:"image"`
}
output := make([]SearchResult, len(results))
for i, anime := range results {
output[i] = SearchResult{
ID: anime.MalID,
Title: anime.DisplayTitle(),
Type: anime.Type,
Image: anime.ImageURL(),
}
}
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusOK)
json.NewEncoder(w).Encode(output)
}

View File

@@ -36,6 +36,7 @@ func NewRouter(cfg Config) http.Handler {
mux.HandleFunc("/", animeHandler.HandleCatalog)
mux.HandleFunc("/search", animeHandler.HandleSearch)
mux.HandleFunc("/api/search", animeHandler.HandleAPISearch)
mux.HandleFunc("/api/search-quick", animeHandler.HandleQuickSearch)
mux.HandleFunc("/api/catalog", animeHandler.HandleAPICatalog)
mux.HandleFunc("/anime/", animeHandler.HandleAnimeDetails)
mux.HandleFunc("/api/anime/", animeHandler.HandleAPIAnimeRelations)

View File

@@ -20,15 +20,20 @@ templ Layout(title string) {
<a href="/watchlist">watchlist</a>
</div>
</div>
<form action="/search" method="GET" class="header-search">
<input type="text" name="q" class="search-input" placeholder="search anime..." />
</form>
<div class="header-search-wrapper">
<form action="/search" method="GET" class="header-search">
<input type="text" id="search-input" name="q" class="search-input" placeholder="search anime..." autocomplete="off" />
<div id="search-dropdown" class="search-dropdown"></div>
</form>
</div>
</div>
</header>
<main>
{ children... }
</main>
<script src="/static/js/search.js"></script>
</body>
</html>
}

View File

@@ -42,7 +42,7 @@ func Layout(title string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><link rel=\"stylesheet\" href=\"/static/css/style.css\"><script src=\"https://unpkg.com/htmx.org@1.9.11\"></script></head><body><header><div class=\"header-top\"><div class=\"header-left\"><a href=\"/\" class=\"logo\">/malago</a><div class=\"nav\"><a href=\"/\">catalog</a> <a href=\"/watchlist\">watchlist</a></div></div><form action=\"/search\" method=\"GET\" class=\"header-search\"><input type=\"text\" name=\"q\" class=\"search-input\" placeholder=\"search anime...\"></form></div></header><main>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><link rel=\"stylesheet\" href=\"/static/css/style.css\"><script src=\"https://unpkg.com/htmx.org@1.9.11\"></script></head><body><header><div class=\"header-top\"><div class=\"header-left\"><a href=\"/\" class=\"logo\">/malago</a><div class=\"nav\"><a href=\"/\">catalog</a> <a href=\"/watchlist\">watchlist</a></div></div><div class=\"header-search-wrapper\"><form action=\"/search\" method=\"GET\" class=\"header-search\"><input type=\"text\" id=\"search-input\" name=\"q\" class=\"search-input\" placeholder=\"search anime...\" autocomplete=\"off\"><div id=\"search-dropdown\" class=\"search-dropdown\"></div></form></div></div></header><main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -50,7 +50,7 @@ func Layout(title string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main></body></html>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main><script src=\"/static/js/search.js\"></script></body></html>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}