P8 — Vyhledávání
Účel obrazovky
Fullscreen search overlay s okamžitými výsledky. Uživatel hledá akce, pořadatele i místa konání. Důraz na rychlost (debounced search) a discovery (populární dotazy, historie). Ve spodní tab bar je aktivní položka PROZKOUMAT (vyhledávání je overlay nad touto kontextovou záložkou, ne samostatná „Hledat" tab).
Content Priority
Empty state (před hledáním)
- Search input s auto-focus a klávesnicí, placeholder „Hledejte akce, pořadatele, místa…"; pod inputem hint, dokud není splněn práh: „Zadejte alespoň 3 znaky" Search Input
- Nedávno hledané — poslední položky jako řádky/seznam; u každé položky „×" pro odstranění jen této položky z historie; tap na text → spustit hledání Chip / Filter Button
- Populární — až 8 tagů/chipů: primárně top dotazy za posledních 7 dní (analytics); pokud data chybí nebo nestačí, fallback na tagy z CMS Chip / Filter Button
- Často hledané — textový seznam 5 položek s emoji 🔥 (žádné mini karty akcí) List Item
Výsledky (po zadání 3+ znaků, stále ve stejném overlayi)
- Search input s query textem a „×" clear button; po potvrzení hledání (Enter) se klávesnice schová a výsledky zůstanou v tom samém fullscreen overlayi (bez navigace pryč z kontextu) Search Input
- Sekce „Akce" (N) — event karty (kompaktní) s highlighted matchem v názvu; u sekce odkaz „Zobrazit vše (N)" → P2 — Seznam akcí s plným výpisem dané kategorie výsledků Section HeaderEvent Card (small)
- Sekce „Pořadatelé" (N) — mini karty s logem a názvem, highlighted match; „Zobrazit vše (N)" → P2 / relevantní výpis Section HeaderOrganizer Card
- Sekce „Místa" (N) — venue karty s názvem a městem; „Zobrazit vše (N)" → P2 kde dává smysl Section HeaderVenue Card
- Quick preview — zkrácená event karta s hlavní info (thumbnail, název, datum, cena) Event Card (small)
Vyhledávací logika (MVP): vyhledávání je bez rozlišení diakritiky a bez rozlišení velikosti pismen. Fuzzy shoda: pro slova delší než 5 znaků tolerovat Levenshteinovo vzdálenost ≤ 1 (překlepy).
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Typing (3+ znaků) | Debounced search (300ms) | Real-time výsledky pod inputem ve stejném overlayi |
| Typing (< 3 znaků) | Bez API dotazu | Empty state + hint „Zadejte alespoň 3 znaky" |
| Tap na event výsledek | Navigace na detail | P3 — Detail akce |
| Tap na pořadatele | Navigace na profil | S13 — Profil pořadatele |
| Tap na místo | Navigace na venue | S12 — Detail místa |
| Tap na položku nedávného hledání | Vyplnit query, spustit hledání | Výsledky v overlayi |
| Tap „×" u položky nedávného hledání | Odebrat jen tuto položku z historie | Aktualizace seznamu |
| Tap na populární tag | Vyplnit query + hledání | Výsledky pro tag |
| Tap „Zobrazit vše (N)" u sekce | Přechod na plný seznam | P2 — Seznam akcí |
| Tap „×" u search input | Clear query | Návrat na empty state |
| Tap „×" (zavřít) nebo back | Zavřít search overlay | Návrat na P1 (tab PROZKOUMAT zůstává logicky aktivní) |
| Klávesa Enter / „Search" na klávesnici | Schovat klávesnici, potvrdit dotaz | Rozšířené výsledky v tom samém overlayi; plný výpis přes „Zobrazit vše" → P2 |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Empty | Před hledáním | Nedávno hledané, populární (8), často hledané (🔥) |
| Typing | Uživatel píše, < 3 znaky | Empty state + hint „Zadejte alespoň 3 znaky", bez výsledků |
| Searching | Debounce period / API call | Subtle spinner vedle search inputu |
| Results | Nalezeny výsledky | Sekce Akce / Pořadatelé / Místa ve stejném overlayi + „Zobrazit vše" → P2 |
| Results (keyboard dismissed) | Po Enter | Stejný overlay, více místa pro seznamy |
| No results | 0 výsledků | X6 — Empty state hledání |
| Error | API selhala | „Vyhledávání je dočasně nedostupné" + retry |
| Offline | Bez připojení | „Pro vyhledávání potřebujete připojení" + cached recent searches |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Query 1–2 znaky | Nespouštět search, zobrazit hint „Zadejte alespoň 3 znaky" |
| Diakritika / velikost pismen | Normalizace dotazu i indexu — shoda bez ohledu na háčky/velikost |
| Překlep (dlouhé slovo) | Fuzzy: Levenshtein ≤ 1 pro slova > 5 znaků |
| Velmi rychlé psaní | Debounce 300ms — odeslat jen poslední stav |
| Žádná historie hledání (nový uživatel) | Skrýt „Nedávno hledané", zobrazit populární + často hledané |
| Výsledky obsahují speciální znaky v názvech | Správný rendering diakritiků a HTML entities |
| Extrémně mnoho výsledků (500+) | Zobrazit omezený náhled per kategorie + vždy „Zobrazit vše (N)" → P2 |
| Pomalé API | Zobrazit skeleton výsledky po 500ms, timeout po 10s → error |
Mobilní patterny a odlišení od webu
Co děláme jinak
- Fullscreen overlay místo inline search — web má search bar v header, na mobilu potřebujeme víc prostoru pro klávesnici a výsledky; výsledky zůstávají v overlayi i po Enter (klávesnice se zavře)
- Auto-focus + klávesnice — okamžitý focus na input, uživatel může začít psát ihned
- Text highlighting — matchované části v názvech výsledků tučně
- Dual výsledky — web hledá jen akce, MA hledá akce + pořadatele + místa najednou
- Tab bar — pod overlayem je aktivní PROZKOUMAT, ne samostatná záložka „Hledat"
Aplikované patterny
- iOS:
UISearchControllerpattern,searchable()modifier v SwiftUI, debouncedPublisher - Android:
SearchBar(Material 3),Debouncev Kotlin Flow,SearchViews suggestions
Reference — Aktuální web
SCR-WEB-41Empty state — 'Our tips' karty, recent searches, popular tagySCR-WEB-42Výsledky — 'Show 258 events' + 'Show 27 organizers', highlighted matche
