SuggestPicker – výběr více položek s našeptáváním

Zdravím, rád bych představil svoji komponentu pro výběr položek s našeptáváním.

Vpodstatě jde o funkcionalitu, kterou jistě mnozí znáte z Facebooku (například při posílání PM) – do inputu začínáte psát, objeví se našeptávač a výběrem položky se v inputu položka zafixuje (či jak to nazvat). Takto je možné vybrat více položek. Osobně komponentu používám pro výběr kategorií (články a kategorie mám ve vazbě N:N), nabízí se možnost vybírat tagy, adresáty zpráv a podobně. Vlastně s tím jde dost dobře nahradit CheckBoxGroup nebo Select s výběrem více položek.

Vytvořeno v nightly buildu, testováno i v 1.0alpha (samozřejmě 5.3) a jeví se to funkčně :)
Příklad ke stažení zde – stačí rozbalit, bohužel nemám k dispozici vhodný 5.3 hosting.
GitHub zde

Komponenta je založená na tomto (lehce upraveném) skriptu a vyžaduje jQuery 1.3 nebo vyšší, součástí balíčku je JS i CSS. Přestože je relativně jednoduchá, je stále vysoce experimentální a budu rád za rady a kritiku. Před použitím je nutné nastavit v šabloně SuggestPicker.phtml správnou cestu k JS a CSS a samozřejmě použít extension method.

Ukázka použití (předpokládá extension method – najdete v ukázkovém presenteru):

<?php
// Picker přijímající i vracející pouze hodnoty
$items = array('David', 'Lucie', 'Markéta', 'Radek', 'Ondra');
$form->addSuggestPicker('picker', 'Picker používající pouze hodnoty', $items, FALSE); // $useKeys = FALSE
// $control->setDefaultValue(array('David', 'Lucie'))
// $control->getValue() --> array('David', 'Lucie')

// Picker pracující s klíči, vhodný pro nastavování a získávání položek pomocí např. ID záznamů
$items = array('muz' => 'David', 'zena' => 'Lucie', 26 => 'Markéta', 30 => 'Radek', 'kamarad' => 'Ondra');
$form->addSuggestPicker('picker', 'Picker používající i klíče', $items); // $useKeys = TRUE
// $control->setDefaultValue(array('muz', 'zena', 26))  pro vybrání 'David', 'Lucie', 'Markéta'
// $control->getValue() --> array('muz', 'zena', 26)
?>

Skript také podporuje vložení vlastní hodnoty (oddělené čárkou), která v našeptávači není. Defaultně se tato hodnota ignoruje a do výsledného pole se nedostane. Je ale možné pomocí $control->setAddingAllowed(TRUE) přidávání položek povolit a tyto položky při zpracování vytáhnout z $control->getAddedValues() jako pole hodnot. Tato funkčnost ale není tak úplně košér, protože JS plugin vnitřně pracuje s daty dost prasácky a vkládání vlastních hodnot spíše tiše nepředpokládá (ikdyž feature requesty jsou). Stoprocentně blbuvzdorné to není, ale jakž takž to funguje (já to používám).

Jak a jestli vůbec se bude tato komponenta dál vyvíjet je bohužel dost závislé na tom, jak bude autor pokračovat s pluginem, na kterém komponenta staví. Třeba mi ale někdy přijde slina a JS alespoň lehce přepíšu. Vzhledem k její experimentálnosti nezakládám stránku v extras a rád bych, aby ji nejdříve vyzkoušel i někdo jiný (než Franta který očekává že stáhne komponentu a jedným příkazem bude vše 100% funkční).

Known issues

• Nepodporuje AJAX a našeptávané položky je nutné definovat již v konstruktoru. Samotný plugin podporu AJAXu má a obsahuje i příslušné callbacky (pracuje s JSON). Já ale AJAXovitost nepotřebuju a z časových důvodů v komponentě není.
• Při povolení přidávání vlastních hodnot se při chybě ve formuláři tyto hodnoty nepředvyplní. Je to proto, že nejsou součástí $control->getValue() a to je zase proto, že tyto položky nemají žádný klíč a přidělil by se jim automaticky, což by mohlo kolidovat s jinými (skutečnými) položkami. Řešením by mohlo být uložení části formuláře i při výskytu chyby, přidělení klíčů nově vytvořeným položkám a jejich nacpání do $control->setValue() – je to ale jen myšlenka a mně samotnému se nelíbí. Problém je ale opět z části v JS a aktuálně mě nenapadá žádné cool řešení.