Pomocí návrhů nebo automatického dokončování uživatelských vstupů je automatické dokončování funkcí, která se často používá při vývoji webových stránek ke zlepšení uživatelského komfortu. Tím, že předvídá, co by uživatelé mohli zadat, a poskytuje návrhy na základě minulých vstupů nebo předem definovaného seznamu možností, šetří uživatelům čas a námahu. V tomto příspěvku se podíváme na to, jak využít automatické doplňování v jazycích HTML a JavaScript, pochopíme, jak automatické doplňování funguje, a definujeme rozdíl mezi automatickým doplňováním a automatickým vyplňováním.
Jak používat automatické dokončování v jazyce HTML:
Aby bylo možné použít automatické doplňování v jazyce HTML, musí vstupní prvek obsahovat atribut „autocomplete“. Podle požadovaného chování jsou možné různé hodnoty tohoto atributu. Například možnost „off“ vypne vestavěnou funkci automatického dokončování ve výchozím prohlížeči, zatímco hodnota „on“ ji zapne. Pro konkrétní návrhy typu vstupu lze použít i další hodnoty, například „name“ (jméno), „email“ (e-mail), „address“ (adresa) atd. Zde je ukázka automatického dokončování HTML v akci:
Ve výše uvedeném příkladu dává hodnota atributu autocomplete „username“ prohlížeči pokyn, aby nabídl dříve použitá uživatelská jména nebo návrhy, které jsou s uživatelskými jmény spojeny, jakmile uživatel začne psát do vstupního pole.
Jaký je proces automatického dokončování? Automatické doplňování využívá vestavěné funkce prohlížeče k ukládání a načítání dříve zadaných údajů. Když uživatel začne psát do vstupního pole se zapnutým automatickým dokončováním, prohlížeč zkontroluje vstupní údaje podle své mezipaměti. Na základě zadání se následně zobrazí rozevírací seznam navržených hodnot. K poskytnutí návrhů lze použít nedávnou historii prohlížeče, data formuláře nebo předem stanovený seznam možností nabízených tvůrcem webových stránek. Uživatel si pak může vybrat jeden z návrhů a zvolená hodnota se okamžitě zadá do vstupního pole.
Jak používat automatické dokončování v jazyce JavaScript:
Pomocí nástrojů nebo frameworků, jako je jQuery UI nebo React, lze do kódu JavaScriptu přidat funkce automatického doplňování. Ve srovnání s vlastností HTML nabízejí tyto knihovny funkci automatického doplňování větší volnost a kontrolu. Pomocí jazyka JavaScript můžete rozvrhnout rozevírací seznam podle svých představ, měnit návrhy na základě dynamických zdrojů dat a odesílat dotazy AJAX na server pro získání návrhů. Zde je jednoduchá ukázka automatického doplňování v jazyce JavaScript pomocí knihovny jQuery UI: ($(„#inputField“)
).autocomplete(„apple“, „banana“, „cherry“]
source);
Funkce automatického doplňování je ve výše uvedeném příkladu použita na vstupním poli s id „inputField“. Pole hodnot, které budou použity jako návrhy pro vstupní pole, je určeno parametrem „source“. Je automatické doplňování totéž co automatické dokončování? Ačkoli jsou principy automatického dokončování a automatického vyplňování podobné, nejsou stejné. Termín „automatické doplňování“ označuje funkci, která doplňuje a nabízí uživateli vstupní údaje na základě dříve zadaných informací nebo předem definovaného seznamu možností. Naproti tomu automatické vyplňování je funkce, která využívá dříve zadané údaje k automatickému vyplnění celých polí formuláře. Zatímco automatické vyplňování vyplňuje řadu polí ve formuláři, automatické doplňování se soustředí na nabídku návrhů pro jedno vstupní pole. Automatické vyplňování může povolit prohlížeč, stejně jako správci hesel a software pro vyplňování formulářů.
Souhrnně lze říci, že automatické dokončování je užitečná funkce, která zlepšuje uživatelský komfort tím, že doplňuje a navrhuje uživatelské vstupy. Zahrnutím vlastnosti „autocomplete“ do vstupních polí a nastavením požadovaného chování ji lze využít v HTML. Ke konstrukci složitějších funkcí automatického dokončování lze použít jazyk JavaScript pomocí knihoven, jako je jQuery UI nebo React. Ačkoli spolu souvisejí, funkce autocomplete a autofill se liší. Efektivitu a použitelnost webových aplikací lze výrazně zlepšit, pokud víte, jak používat automatické doplňování.
Funkce automatického dokončování obvykle není přístupná prostřednictvím nastavení zařízení nebo aplikace. Webové prohlížeče, vyhledávače, programy pro zasílání zpráv a textové editory jsou jen několika příklady platforem a aplikací, které často používají automatické dokončování jako součást svého uživatelského rozhraní. V závislosti na konkrétním používaném programu nebo platformě se jeho přítomnost a chování může měnit.
Automatické dokončování v prohlížeči Chrome můžete používat pomocí následujících akcí: Otevřete Chrome a vyberte tři tečky v pravém horním rohu okna prohlížeče.
1. 2. V rozevírací nabídce vyberte možnost „Nastavení“. 3. Chcete-li zobrazit složitější nastavení, posuňte se dolů a klikněte na možnost „Upřesnit“. 4. V části „Soukromí a zabezpečení“ vyberte možnost „Nastavení automatického vyplňování“. Pokud si přejete používat automatické vyplňování adres a platebních údajů, ujistěte se, že jsou v nastavení automatického vyplňování zapnuty přepínače vedle položek „Automaticky vyplňovat adresy“ a „Automaticky vyplňovat způsoby plateb“. 6. V nastavení automatického vyplňování klikněte na položku „Hesla“ a ujistěte se, že přepínač vedle položky „Nabídnout uložení hesel“ je zapnutý, aby bylo povoleno automatické vyplňování hesel. Výběrem položek „Adresy“, „Platební metody“ nebo „Hesla“ v možnostech automatického vyplňování můžete také spravovat uložené informace pro automatické doplňování. 8. Chcete-li využít funkci automatického dokončování, stačí začít psát do pole formuláře a Chrome vám nabídne návrhy na základě historie prohlížeče a již zadaných informací. 9. Pomocí kláves se šipkami přejděte na návrh, který chcete použít, a poté stisknutím klávesy Enter vyplňte pole formuláře.
Funkci automatického dokončování v prohlížeči Chrome můžete použít k rychlému vyplnění formulářů a ušetření času podle následujících kroků.