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.

Dobrá zpráva — vývoj FancyBoxu neskončil

Ze všech klonů LightBoxu nejraději používám FancyBox. Už to vypadalo, že jeho vývoj skončí první verzí, ale Janis Skarnelis najednou přišel s kompletně přepsanou novou verzí. Co má navíc FancyBox 1.2.1 oproti verzi 1.0?

• Je trošku více sexy - díky pluginu jQuery.Easing se otevírá velmi ladně a pod obsah přidává jemný stín.
• Cizí stránku lze teď otevřít také jako iframe pomocí class="iframe". Viz screenshot.
• Přibylo několik nových parametrů nastavení a událostí (třeba callback callbackOnShow)
• FancyBox má podporu v Google Group

jQuery: Jak zjistit, zda se prvek vyskytuje v dokumentu?

 if ($('#hledany-prvek').length) { // pocet prvku pole obsahujici vsechny elementy #hledany je nenulovy
    // prvek existuje
  } else {
    // prvek neexistuje
  }

Sám bych na to při svých tanečcích s javascriptem pochopitelně nepřišel. Poradili ale na jQuery for Designers.

Ten web je skvělý jak trpělivě jQuery vysvětluje a propaguje mezi širšími neprogramátorskými masami. Těmi, kdo jQuery využívají pro práci s uživatelským rozhraní.

FancyBox: otevření více obrázků z jediného

FancyBox tohle příliš nedokumentuje, ale občas je potřeba v dokumentu mít jediný obrázek a po kliknutí na něj jich v galerii zobrazit více.

Pomůže pohled do zdrojového kódu webu FancyBoxu.

Nejprve je potřeba vytvořit pole s obrázky. Podle komentáře to nemusí být vždy obrázky a je možné jim přiřadit další vlastnosti:

		

//List can contain mixed media too

//Parameter "o" ir optional and used to override settings, example: {url: "http://www.google.com", title: false,  o: {'frameWidth': 200} }



  var imageList = [

    {url: "/img/examples/6_b.jpg", title: "First image"},

    {url: "/img/examples/7_b.jpg", title: "Second image"},

    {url: "/img/examples/8_b.jpg", title: "Third image"}

  ];

Pak je potřeba připravit funkci, která obrázky načte:

function getGroupItems(opts) {

  jQuery.each(imageList, function(i, val) {

  opts.itemArray.push(val);
    });

}

A nakonec ji zavolat při spuštění FancyBoxu. Slouží k tomu vlastnost itemLoadCallback:

$("a").fancybox({

  'itemLoadCallback': getGroupItems
			

});