skeeks/yii2-tagsinput

The yii2-tagsinput is a Yii 2 wrapper for [bootstrap-tagsinput](https://github.com/timschlechter/bootstrap-tagsinput) with [typeahead.js](https://twitter.github.io/typeahead.js/)

Installs: 9

Dependents: 0

Suggesters: 0

Stars: 0

Watchers: 1

Forks: 5

Language:HTML

Type:yii2-extension

1.1.0 2016-11-23 14:48 UTC

README

Install

Via Composer

$ composer require avikarsha/yii2-tagsinput

or add

"avikarsha/yii2-tagsinput": "*"

to the require section of your composer.json file.

Usage

On your view file.


<?php
use avikarsha\tagsinput\TagsinputWidget;
?>

<?= $form->field($model, 'tags')->widget(TagsinputWidget::classname(), [
    'clientOptions' => [
        'trimValue' => true,
        'allowDuplicates' => false
    ]
]) ?>

<?php echo $form->field($model, 'places')->widget(TagsinputWidget::classname(), [
    'clientOptions' => [
        "itemValue" => 'name',
        "itemText" => 'name',
    ],
   'dataset' => [
        [
            'remote' => [
                'url' => Url::to(['get-countries']). '?q=%QUERY',
                'wildcard' => '%QUERY'
            ],
            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('name')",
            'displayKey' => 'name',
            'limit' => 10,
            'templates' => [
                'header' => '<h3 class="name">Country</h3>'
            ]
        ],
        [
            'remote' => [
                'url' => Url::to(['get-cities']). '?q=%QUERY',
                'wildcard' => '%QUERY'
            ],
            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('name')",
            'displayKey' => 'name',
            'limit' => 10,
            'templates' => [
                'header' => '<h3 class="name">City</h3>'
            ]
        ],
        [
            'remote' => [
                'url' => Url::to(['get-states']). '?q=%QUERY',
                'wildcard' => '%QUERY'
            ],
            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('name')",
            'displayKey' => 'name',
            'limit' => 10,
            'templates' => [
                'header' => '<h3 class="name">State</h3>'
            ]
        ]
    ]
]) ?>

For more options, visit: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/