Tutoriál: Jednoduchý našeptávač pomocí jQuery Autocomplete

Vytvořit našeptávač s pomocí jednoho z nejpopulárnějších jQuery pluginů může být snadné jako napsat $('#input').autocomplete(data), ale má svá úskalí. Podívejme se na ně ve zjednodušeném tutoriálu pro neprogramátory od neprogramátora.

1. Seberte data, ve kterých bude našeptávač vyhledávat

Jejich zdrojem může být lokální javascriptové pole, nebo externí data v poli a nebo nakonec skript, který se dotazuje do databáze.

Pozor na rychlost a zátěž databáze! Poslední skript za normálních okolností posílá dotazy do databáze po každém stisku klávesy. Bude pochopitelně pomalejší než vyhledávání v javascriptovém poli, ale to se zase nehodí na procházení stovek až tisíců záznamů.

2. Nainstalujte jQuery Autocomplete

Stáhněte jQuery Autocomplete. Do HTML hlavičky před něj musíte přilinkovat jQuery. Neváhejte pro zrychlení načítání použít hosting u Google.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
 <script type="text/javascript" src="/js/index.js"></script>

V souboru index.js mám centrální “skriptopis”, do kterého v následujícím kroku přidáme řádek, který našeptávač “spustí”.

3. Přidejte spuštěč

V našem případě do /js/index.js nebo přímo do hlavičky dokumentu přidejte

$('#input').autocomplete('/query.php');

#input je id formulářového prvku, na který našeptávač chcete pověsit. /query.php je zdroj dat - v našem případě skript, který se dotazuje do databáze.

Autocomplete v defaultním nastavení posílá dotazovacímu souboru vyhledáváný řetězec v parametru “q”, tedy například /query.php?q=Ahoj.

4. Přidejte a upravte CSS, dolaďte parametry

Pokud se vše zdařilo, našeptávač vyhledává a teď už stačí jen doladit vzhled. Ze staženého balíku do centrálního stylopisu nalinkujte CSS. Nezapomeňte na obrázek s indikátorem načítání.

@import url("jquery.autocomplete.css");

jQuery Autocomplete má samozřejmě spoustu dalších parametrů, kterými lze například určit od kolika zadaných znaků se má ve zdroji dat vyhledávat jako pomocí parametru minChars.

Hodně zdaru.

Zoomorama, OpenZoom a další - zooming také ve Flashi

Je pro vývojáře typické, že komunita kolem Flashe na microsoftí Deep Zoom reaguje trošku ve stylu “vždyť my to máme už dávno”. Ukázky z odkazovaného článku a Zoomoramy ovšem nedosahují tak silného uživelského prožitku.

Lépe na tom je OpenZoom, což je “flashová knihovna pro ZUI (Zoomable User Interface)”, která je přímou reakcí na Deep Zoom. Podívejte se na klasické mapové příklady z představení OpenZoom. Nezapomeňte používat kolečko myši.