|
| 1 | +# yii2-tagsinput |
| 2 | + |
| 3 | +## Install |
| 4 | + |
| 5 | +Via Composer |
| 6 | + |
| 7 | +```bash |
| 8 | +$ composer require avikarsha/yii2-tagsinput |
| 9 | +``` |
| 10 | + |
| 11 | +or add |
| 12 | + |
| 13 | +``` |
| 14 | +"avikarsha/yii2-tagsinput": "*" |
| 15 | +``` |
| 16 | + |
| 17 | +to the require section of your `composer.json` file. |
| 18 | + |
| 19 | + |
| 20 | +## Usage |
| 21 | + |
| 22 | +On your view file. |
| 23 | + |
| 24 | +```php |
| 25 | + |
| 26 | +<?php |
| 27 | +use avikarsha\tagsinput\TagsinputWidget; |
| 28 | +?> |
| 29 | + |
| 30 | +<?= $form->field($model, 'tags')->widget(TagsinputWidget::classname(), [ |
| 31 | + 'clientOptions' => [ |
| 32 | + 'trimValue' => true, |
| 33 | + 'allowDuplicates' => false |
| 34 | + ] |
| 35 | +]) ?> |
| 36 | + |
| 37 | +<?php echo $form->field($model, 'places')->widget(TagsinputWidget::classname(), [ |
| 38 | + 'clientOptions' => [ |
| 39 | + "itemValue" => 'name', |
| 40 | + "itemText" => 'name', |
| 41 | + ], |
| 42 | + 'dataset' => [ |
| 43 | + [ |
| 44 | + 'remote' => [ |
| 45 | + 'url' => Url::to(['get-countries']). '?q=%QUERY', |
| 46 | + 'wildcard' => '%QUERY' |
| 47 | + ], |
| 48 | + 'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('name')", |
| 49 | + 'displayKey' => 'name', |
| 50 | + 'limit' => 10, |
| 51 | + 'templates' => [ |
| 52 | + 'header' => '<h3 class="name">Country</h3>' |
| 53 | + ] |
| 54 | + ], |
| 55 | + [ |
| 56 | + 'remote' => [ |
| 57 | + 'url' => Url::to(['get-cities']). '?q=%QUERY', |
| 58 | + 'wildcard' => '%QUERY' |
| 59 | + ], |
| 60 | + 'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('name')", |
| 61 | + 'displayKey' => 'name', |
| 62 | + 'limit' => 10, |
| 63 | + 'templates' => [ |
| 64 | + 'header' => '<h3 class="name">City</h3>' |
| 65 | + ] |
| 66 | + ], |
| 67 | + [ |
| 68 | + 'remote' => [ |
| 69 | + 'url' => Url::to(['get-states']). '?q=%QUERY', |
| 70 | + 'wildcard' => '%QUERY' |
| 71 | + ], |
| 72 | + 'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('name')", |
| 73 | + 'displayKey' => 'name', |
| 74 | + 'limit' => 10, |
| 75 | + 'templates' => [ |
| 76 | + 'header' => '<h3 class="name">State</h3>' |
| 77 | + ] |
| 78 | + ] |
| 79 | + ] |
| 80 | +]) ?> |
| 81 | + |
| 82 | +``` |
| 83 | + |
| 84 | +For more options, visit: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ |
0 commit comments