TagInput

Rozšíření formulářů pro rychlé a intuitivní zadávání tagů s našeptáváním a jednoduchou validací.

Ukázka

Online demo for version 1.2: http://taginput.injectionsoft.com/

Použití

Vložte tagInput.css a tagInput.js do veřejně přístupné složky (tzn. do složeky pod www). Například můžete použít:

<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/tagInput.css" type="text/css">
<script type="text/javascript" src="{$basePath}/js/tagInput.js"></script>

Důležité je načítat tagInput.js až po netteForms.js.

Poté vložte TagInput.php kamkoli se pro třídy dívá váš RobotLoader. V BasePresenter.php::startup() zaregistrujte rozšíření pomocí:

\Nette\Forms\Controls\TagInput::register();

Nyní můžete snadno používat TagInput ve formulářích pomocí

$form->addTag('tags');

Autocomplete – našeptávání

Pole s našeptávanými tagy předejte jako parametr setteru při vytváření formuláře.

$form->addTag('tags')->setSuggestCallback(function($filter, $count) { ... }); // nebo callback

Lze nastavit délku vraceného pole (mimo jiné se předává callbacku jako druhý argument):

$form->addTag('tags')->setPayloadLimit(5);

Důležitá část je přidání speciální akce do prezenteru (nebo společného předka prezenterů), ve kterém se bude tato komponenta využívat.

public function actionTagInputSuggestControlname($word_filter)
{
    $form = $this->getComponent('componentname');
    $form['controlname']->renderResponse($this, $word_filter);
}

Všimněte si, že controlname figuruje jak v názvu akce, tak jako klíč ve form. Místo něj napište název tag controlu (např. ukázeky na této stránce by měli tags). Hodnota componentname, tedy název vaší komponenty, stačí přepsat jenom na jednom místě.

Validace

TagInput validuje jednak klasická pravidla z TextBase (tedy hlavně TextInput), ale i vlastní.

• Form::EQUAL – jako parametr bere pole, které musí být stejné jako hodnota
• Form::FILLED
• Form::MIN_LENGTH – místo počtu znaků sleduje počet tagů
• Form::INTEGER – každý tag musí být integer
• Form::FLOAT – každý tag musí být float

a vlastní

• TagInput::UNIQUE – kontroluje, jestli je každý tag unikátní
• TagInput::ORIGINAL – uživatel si nemůže vytvářet nové tagy (vyžaduje našeptávání)

nepodporovaná pravidla jsou

• Form::EMAIL
• Form::URL
• Form::REGEXP
• Form::PATTERN
• Form::RANGE

$.ajax({
    url: i.hasSuggest(),

Login to submit a comment