Textové pole je základ
Přestože s HTML5 přišly i další možnosti pro vstup dat ve formulářích, implementace v prohlížečích není ani dnes stoprocentní. Navíc ne vždy „systémové“ řešení vyhovuje a především ne všechny potřebné druhy vstupních prvků jsou součástí specifikace. Proto stále zůstává základem textové pole, na které se navazuje další funkcionalita.
Výhodou tohoto řešení je také to, že i s vypnutým JavaScriptem formulář funguje, byť ne tak komfortně.
Automatické doplňování
S automatickým doplňováním se dnes setkáváme zcela běžně – počínaje adresním řádkem webového prohlížeče, přes různé vyhledávače, až třeba po pole pro vložení PSČ. Data mohou být k dispozici přímo ve formuláři, nebo je lze získávat až během psaní.
Typicky to funguje tak, že při dosažení určité délky napsaného textu a po vypršení prodlevy od napsání posledního znaku se zobrazí nabídka, z níž si lze vybrat, co se do pole vloží. Pokud uživatel nevloží nic a píše dál, nabídka se postupně aktualizuje.
Widget Autocomplete
V jQuery UI je pro automatické doplňování k dispozici widget Autocomplete. Nabízí vše potřebné k realizaci této funkcionality, včetně potřebné interakce s klávesnicí a myší. V kódu HTML potřebujeme mít textové pole:
<input type="text" name="city" id="city">
Uvedené pole bude sloužit k zadávání města. Pro usnadnění uživateli nabídneme největší česká města, která se budou často používat. Javascriptový kód může vypadat například takto:
var props = {
source: ['Praha', 'Brno', 'Ostrava', 'Plzeň', 'Hradec Králové', 'Ústí nad Labem',
'Liberec']
};
$('#city').autocomplete(props);
Zobrazení nabídky k automatickému
doplnění do textového pole
Předává se pouze seznam k automatickému doplnění, ostatní parametry zůstávají výchozí. Proto se nabídka zobrazí 300 ms od chvíle, kdy uživatel přestane psát a k zobrazení postačí jediný napsaný znak. V daném případě to bude zřejmě plně vyhovující. Někdy to ale můžeme chtít změnit:
var props = {
source: …,
minLength: 3,
delay: 700
};
$('#city').autocomplete(props);
Větší minimální délka se hodí hlavně v případech, že je nabízených možností hodně a je potřeba je rozumně omezit, aby jejich nabídnutí mělo vůbec smysl. Delší prodleva se zase hodí v případech, kdy lze očekávat, že bude uživatel psát pomalu, nebo pokud se budou data načítat ze serveru (viz dále) a je žádoucí počet dotazů omezit.
Štítky pro hodnoty
Pokud se zadává například PSČ, může být vhodné u každé nabízené možnosti uvést další informaci (v případě PSČ je to dodací pošta). Ta se do pole po výběru nevloží a slouží jen pro orientaci uživatele – je to tzv. štítek. Místo obyčejného pole hodnot použijeme pole objektů:
var props = {
source: [{ label: 'Bernartice', value: '257 65'}, { label: 'Bílkovice',
value: '257 26'}, …]
};
$('#city').autocomplete(props);
Využití štítků
V tomto případě ovšem nabízení hodnot funguje trochu jinak – do pole je potřeba psát texty, které lze vyhledat ve štítcích. Pokud je potřeba hledat i v samotných hodnotách, musí být ve štítcích obsaženy (například místo „Bernartice“ by se použilo „257 65 Bernartice“ apod.).
Načítání dat ze serveru
V mnoha případech je vhodnější (ne-li vůbec technicky jediné proveditelné) načítat data v reálném čase ze serveru, místo aby byla načtena předem s formulářem. Představme si třeba hledání v názvech zboží v internetovém obchodě, který může mít desetitisíce položek i více.
Načítání lze realizovat dvěma způsoby – buď se vše nechá na implementaci ve widgetu (což je doporučená cesta, pokud neexistuje nějaká překážka v jejím použití), nebo si to lze realizovat po svém. Využití implementace ve widgetu Autocomplete je velmi snadné:
var props = {
source: '/search.php'
};
$('#city').autocomplete(props);
Výsledkem je, že se v okamžiku potřeby nabídnout data k vyplnění odešle na server požadavek metodou GET a k URL se přidá parametr „term“, v němž bude text napsaný uživatelem. Pokud uživatel napíše například „abc“, na server odejde požadavek na /search.php?term=abc. Widget od serveru očekává data ve formátu JSON, která budou vypadat jako ve výše uvedených příkladech.
Vrácená data mohou obsahovat jak samotné hodnoty, tak objekty se štítky a hodnotami. Požadavek může být odeslán jak na stejný server, tak i na jiný (ten ale musí podporovat JSONP).
Potřebujete-li realizovat požadavek na server nějak jinak, případně data nějak zpracovávat i místně, můžete místo URL použít funkci, která vykoná vše potřebné a po asynchronním zpracování vrácených dat zavolá callback response(). Podrobnosti najdete v dokumentaci.
Události a stylování
Při práci s Autocomplete lze reagovat na řadu událostí, například search, response nebo select. Bývá to potřeba málokdy, ale ta možnost tu je. Opět odkazuji na dokumentaci.
Co se týká vlastního stylování (standardně se používá výchozí podoba pro dané téma jQuery UI), jsou k dispozici CSS třídy ui-autocomplete (nabídka textů k doplnění) a ui-autocomplete-input (textové pole). Můžete si tedy upravit, co je potřeba.
Kalendář příště
Původně měl být součástí tohoto dílu i kalendář, nakonec jsem se ale rozhodl ho přesunout až do dílu příštího, protože si zaslouží dostatek prostoru. Pro tentokrát je to tedy vše a pro příště se můžete těšit na ten slíbený kalendář.