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.
Trvalý odkaz
