1. What's new
2. Requirements
3. Setup
4. Usage
5. single selection: using active record
6. single selection: used alongside twitter bootstrap
7. single selection: without active record
8. multiple selection (tagging)
9. using events callbacks
10. widgetFactory configuration example (main.php)
11. Resources

yii-selectize is a wrapper for the jQuery selectize.js UI control created by Brian Reavis. This extension can be used with or without a model. It also supports configuration using widgetFactory and provides basic css adjustment to work with the default Yii 1.x theme or Twitter Bootstrap.

What's new ¶

• Added example module
• Updated selectize.js to version 0.9.0

Requirements ¶

• Yii 1.1 (tested on version 1.1.14)

Setup ¶

• Extract the downloaded file in your extensions folder (protected/extensions/)

Usage ¶

Note: a demo module is available in the "example" folder. Just copy it from the example folder to your modules folders and enable it in your config file.

single selection: using active record ¶

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ), 
    'fullWidth' => false,
    'placeholder' => 'Write here!',
));

single selection: used alongside twitter bootstrap ¶

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'useWithBootstrap' => true,
//    'cssTheme' => 'bootstrap2', // uncomment to use v2 theme instead of v3
    'fullWidth' => false,
));

single selection: without active record ¶

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'name' => 'test2',
    'value' => 'world', // the selected item
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
));

multiple selection (tagging) ¶

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'name' => 'test4',
    'value' => 'world',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'selectedValues' => array('hello', 'world'),
    'fullWidth' => false,
    'htmlOptions' => array(
        'style' => 'width: 50%',
    ),
    'multiple' => true,
));

using events callbacks ¶

php: ¶

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'callbacks' => array(
        'onChange' => 'myOnChangeTest',
        'onOptionAdd' => 'newTagAdded',
    ),
));

javascript: ¶

[javascript]
function myOnChangeTest(value) {
    console.log(value);
}

function newTagAdded(value, $item) {
    console.log('new item: ' + value);
    console.log($item);
}

widgetFactory configuration example (main.php) ¶

'widgetFactory' => array(
    'widgets' => array(
        'YiiSelectize' => array(
            'defaultOptions' => array(
                'create' => false,
            ),
        ),
    ),
),

Resources ¶

• Project page
• jQuery plugin homepage with demo