Jak na našeptávač s HTML5

Je to pár let, co se objevil Google Suggest, nedlouho poté ho následovaly české portály se svými Našeptávači a Rádci. Princip je jednoduchý, ale ne každý chce našeptávač vytvářet na zelené louce (ten od Seznamu se blíží k 300 řádkům a dokonce padlo obvinění, že české portály od sebe kód opsaly).

Pojďme se podívat, nakolik se nám zmíněných 300 řádků kódu zkrátí v případě, že prohlížeč bude podporovat HTML5. Anne van Kesteren tvorbu našeptávače podrobně popisuje v návodu An HTML5-style "Google Suggest".

My si zobrazíme rovnou výsledek. Klientskou část našeptávače v HTML5 lze napsat na 4 řádky (a to se kód zalamuje, jinak by to byly dva):

<input list="suggest" name="q"
oninput="list.data = '?w=' + encodeURIComponent(value)">
<datalist id="suggest"></datalist>

Kód si můžete vyzkoušet ve všech prohlížečích, které již implementovali WebForms2, tj. zatím jen v Opeře.

Příklad využívá nové značky <datalist> a její schopnosti snadno dynamicky měnit obsah. Není třeba kódovat žádný AJAX, to vše má na starosti prohlížeč. Kodér pouze při změně hodnoty v textovém boxu nastaví vlastnosti datalistu na novou URL a datalist si data získá sám.

Značka <datalist> nebude v HTML5 zdaleka tou nejmocnější. Další možnosti skrývá např. značka <datagrid>, která umožňuje vytvářet vnořené rozbalovací seznamy, ve kterých se bude obsah jednotlivých větví automaticky načítat ze serveru jen v případě, kdy jsou skutečně potřeba.

Pokud se chcete o základních kamenech nových webových formulářů, tzv. Web Forms2, které činí jeden ze základních stavebních kamenů HTML5, přečtěte si WHATWG - budoucnost webu? od Davida Majdy. Zmíněný našeptávač je jen malou ukázkou toho, jak se život webových vývojářů s příchodem HTML5 změní.