Autocomplete

Kdy použít Autocomplete:

• Uživateli se nabízí omezený seznam možností, které systém zná předem.
• Cílem je zrychlit výběr a minimalizovat překlepy.
• Typické příklady: výběr města, jména klientů, existující štítky.

Rozdíl mezi Autocomplete a Search

• Autocomplete = asistovaný výběr z předem známých hodnot.
• Search = vyhledávání v obsahu bez předem omezeného seznamu.

Varianty

Autocomplete je variantou input komponenty, přejímá tak standardní chování komponenty (prefix, suffix, addony, valid, invalid nebo disabled stavy atd..). Viz Input komponenta.

Základní varianta

Při vpisování do vstupního pole se automaticky objeví nabídka s dostupnými návrhy. Vybraný návrh se pak automaticky vloží do vstupního pole.

Varianty zobrazení

Vstupní pole může být zobrazeno jako Search nebo i jako Dropdown.

Multiple varianta

Zvolené výrazy lze také zobrazovat jako chipy.

Nabídka

Data v nabídce

Data, která se zobrazují v nabídce lze rozšířit o Ikonu, Description a Tag. Tag má pouze jednu barvu a to modrou.

Seskupovaní dat

Data v nabídce lze dělit do skupin.

Menu pro autocomplete

Autocomplete používá předdefinovaný pattern menu který obsahuje pouze funkce a vlastnosti obsažené v komponentě.

Vlastnost itemCreate

Když se žádná položka nenajde (u příkladu níže zadejte jakýkoliv dlouhý textový řetězec). Komponenta ale pouze tuto volbu zobrazuje, samotné provedení akce a záleží na návrhu. Může se zobrazit modal, sidesheet nebo jiné.

Vlastnost sticky groupLabel

Header pro menu komponenty autocomplete má možnost jak simulovat chování dvousloupcové tabulky. Toto je custom řešení pro aplikaci KNZ a SUS+.