PHP code example of errohitsinghal / yii2-tom-select

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

errohitsinghal / yii2-tom-select example snippets

use errohitsinghal\tomselect\TomSelect;

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'category_id',
    'items' => [
        '1' => 'Option 1',
        '2' => 'Option 2',
        '3' => 'Option 3',
    ],
]) 

<?= TomSelect::widget([
    'name' => 'category',
    'value' => 1,
    'items' => [
        '1' => 'Option 1',
        '2' => 'Option 2',
        '3' => 'Option 3',
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'tags',
    'items' => $tagList,
    'multiple' => true,
    'plugins' => ['remove_button', 'clear_button'],
]) 

use errohitsinghal\tomselect\TomSelect;
use yii\bootstrap5\ActiveForm;

 $form = ActiveForm::begin(); 

use errohitsinghal\tomselect\TomSelect;
use errohitsinghal\tomselect\ActiveField;
use yii\bootstrap5\ActiveForm;

 $form = ActiveForm::begin([
    'fieldClass' => ActiveField::class,
]); 

use errohitsinghal\tomselect\ActiveField;
use yii\bootstrap5\ActiveForm;
use yii\web\JsExpression;

// The widget respects Yii2's validation
<?= $form->field($model, 'category_id')->tomSelect($categories) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'vehicle',
    'items' => [
        'Cars' => [
            'toyota' => 'Toyota',
            'honda' => 'Honda',
            'ford' => 'Ford',
        ],
        'Motorcycles' => [
            'yamaha' => 'Yamaha',
            'kawasaki' => 'Kawasaki',
        ],
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'tags',
    'type' => TomSelect::TYPE_TEXT,
    'multiple' => true,
    'create' => true,
    'plugins' => ['remove_button'],
    'clientOptions' => [
        'persist' => false,
        'createOnBlur' => true,
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'users',
    'items' => $userList,
    'multiple' => true,
    'plugins' => [
        'remove_button' => [
            'title' => 'Remove this item',
        ],
        'clear_button' => [
            'title' => 'Remove all items',
        ],
        'dropdown_header' => [
            'title' => 'Select Users',
        ],
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'user_id',
    'placeholder' => 'Search for a user...',
    'clientOptions' => [
        'valueField' => 'id',
        'labelField' => 'name',
        'searchField' => ['name', 'email'],
        'load' => new \yii\web\JsExpression('function(query, callback) {
            if (!query.length) return callback();
            fetch("/api/users/search?q=" + encodeURIComponent(query))
                .then(response => response.json())
                .then(json => callback(json.results))
                .catch(() => callback());
        }'),
    ],
]) 

use yii\web\JsExpression;

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'country_id',
    'items' => $countries,
    'renderOption' => new JsExpression('function(data, escape) {
        return "<div class=\"option\">" +
            "<img src=\"/img/flags/" + escape(data.value) + ".png\" class=\"me-2\" width=\"20\">" +
            "<span>" + escape(data.text) + "</span>" +
        "</div>";
    }'),
    'renderItem' => new JsExpression('function(data, escape) {
        return "<div class=\"item\">" +
            "<img src=\"/img/flags/" + escape(data.value) + ".png\" class=\"me-2\" width=\"16\">" +
            escape(data.text) +
        "</div>";
    }'),
]) 

use yii\web\JsExpression;

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'category',
    'items' => $categories,
    'clientEvents' => [
        'change' => new JsExpression('function(value) {
            console.log("Selected:", value);
            // Trigger dependent dropdown update
            updateSubcategories(value);
        }'),
        'item_add' => new JsExpression('function(value, item) {
            console.log("Added item:", value);
        }'),
        'dropdown_open' => new JsExpression('function(dropdown) {
            console.log("Dropdown opened");
        }'),
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'product_id',
    'placeholder' => 'Search products...',
    'plugins' => ['virtual_scroll'],
    'maxOptions' => null,
    'clientOptions' => [
        'valueField' => 'id',
        'labelField' => 'name',
        'searchField' => 'name',
        'firstUrl' => new JsExpression('function(query) {
            return "/api/products?q=" + encodeURIComponent(query) + "&page=1";
        }'),
        'load' => new JsExpression('function(query, callback) {
            const url = this.getUrl(query);
            fetch(url)
                .then(response => response.json())
                .then(json => {
                    this.setNextUrl(query, json.next_url);
                    callback(json.results);
                })
                .catch(() => callback());
        }'),
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'status',
    'items' => $statuses,
    'options' => [
        'id' => 'custom-id',
        'class' => 'custom-class',
        'data-custom' => 'value',
    ],
]) 

// Parent dropdown
<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'country_id',
    'items' => $countries,
    'variableName' => 'countrySelect',
    'clientEvents' => [
        'change' => new JsExpression('function(value) {
            citySelect.clear();
            citySelect.clearOptions();
            if (value) {
                citySelect.load(value);
            }
        }'),
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'user_id',
    'clientOptions' => [
        'valueField' => 'id',
        'labelField' => 'name',
        'searchField' => ['name', 'email'],
        // Pre-populate with selected option
        'options' => [
            [
                'id' => $model->user_id,
                'name' => $model->user->name,
                'email' => $model->user->email,
            ],
        ],
        'items' => [$model->user_id],
        'load' => new JsExpression('function(query, callback) {
            if (!query.length) return callback();
            fetch("/api/users?q=" + encodeURIComponent(query))
                .then(response => response.json())
                .then(json => callback(json))
                .catch(() => callback());
        }'),
    ],
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'category',
    'items' => $categories,
    'variableName' => 'mySelect',
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'category',
    'items' => $categories,
    'useBaseAsset' => true,
]) 

<?= TomSelect::widget([
    'model' => $model,
    'attribute' => 'category',
    'items' => $categories,
    'options' => [
        'class' => 'my-custom-select',
    ],
]) 

'items' => [
    'value1' => 'Label 1',
    'value2' => 'Label 2',
]

'multiple' => true,