feat: add debounced search dropdown with quick results
This commit is contained in:
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user