Select2

Traditional selector on steroids

We have included the Select2 on roids plugin of Igor Vaynberg. The following is a simple example of the amount of possible features that this plugin can do. For further information on its use, please visit plugin docs.

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbSelect2',
    array(
        'asDropDownList' => false,
        'name' => 'clevertech',
        'options' => array(
            'tags' => array('clever', 'is', 'better', 'clevertech'),
            'placeholder' => 'type clever, or is, or just type!',
            'width' => '40%',
            'tokenSeparators' => array(',', ' ')
        )
    )
);


Here's all configuration properties which you can set for TbSelect2 widget.

Note that this widget is a subclass of CInputWidget, so several attributes are common to all of such subclasses.

Property Description
CModel model = null The data model associated with this widget. See CInputWidget.model. Either this property along with attribute should be defined, or the name.
string attribute = null If you set the model attribute, here you have to specify the name of the model property which you want to change with this widget. See CInputWidget.attribute Either this property along with model should be defined, or the name.
string name = null The value of name HTML attribute of the input element. It must be set if you did not provide value for model. See CInputWidget.name Either this property should be defined, or the model together with attribute.
string value = null Here you can force the initial value of the input. If model is provided, by default model's value is used. See CInputWidget.value
array htmlOptions = array() HTML attributes of the input tag itself. Please note that it is not the attributes of a wrapper tag around the input. See CInputWidget.htmlOptions
TbActiveForm form = null You can pass the TbActiveForm instance here to help the widget automatically generate proper name attribute. Actually, when you make Select2 using the TbActiveForm.select2Row() call, the form instance gets passed to widget through this very attribute
array data = array() Data for list options. Elements of this array are "value" => "value label", the same as the result of CHtml::listData.
boolean asDropDownList = true Whether to display as a dropdown list or as a tag selector.
array options = array() Options for the original library. This value will be JSON-encoded and fed to select2. See the library documentation for list of all possible options.
array events = array()

Array of Javascript event handlers in format "event_name" => "Javascript code for handler". This handlers will be attached to input element.

volatile Note that the presence of this option encourages to write Javascript code inside your view files, so most possibly we will completely remove it in future versions.

string val = "" The default value.

Initially empty dropdown (e. g. for loading it with AJAX call) with placeholder:

$this->widget(
    'booster.widgets.TbSelect2',
    array(
        'name' => 'emptydata',
        'data' => null,
        'options' => array(
            'placeholder' => 'type clever, or is, or just type!',
            'width' => '40%',
        )
    )
);

Sending multiple selected elements to server

This is the test for issue #574 on GitHub.

Select some elements in the selector, open Developer Tools in your browser (e. g. in Firefox it would be Firebug) and click on the button. In the details about the POST request you should see properly formatted parameters being sent to the server.

echo CHtml::beginForm('/', 'post', ['id' => 'issue-574-checker-form']);
$this->widget(
    'booster.widgets.TbSelect2',
    array(
        'name' => 'group_id_list',
        'data' => array('RU' => 'Russian Federation', 'CA' => 'Canada', 'US' => 'United States of America', 'GB' => 'Great Britain'),
        'htmlOptions' => array(
            'multiple' => 'multiple',
        ),
    )
);
echo CHtml::endForm();
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Click on me with Developer Tools opened!',
        'htmlOptions' => array(
            'onclick' => 'js:$.ajax({
                url: "/",
                type: "POST",
                data: $("#issue-574-checker-form").serialize()
            });'
        )
    )
);

Note We are wrapping the multiselect into the form, to send data to endpoint in traditional way. Another way is to send the data formatted as you wish. This way you get selected elements using either .val() or .select2('val') method of the jQuery element representing the select element.

Like that:

$this->widget(
    'booster.widgets.TbSelect2',
    array(
        'name' => 'group_id_list',
        'data' => array('RU' => 'Russian Federation', 'CA' => 'Canada', 'US' => 'United States of America', 'GB' => 'Great Britain'),
        'htmlOptions' => array(
            'multiple' => 'multiple',
            'id' => 'issue-574-checker-select'
        ),
    )
);
echo CHtml::endForm();
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Click on me with Developer Tools opened!',
        'htmlOptions' => array(
            'onclick' => 'js:$.ajax({
                url: "/",
                type: "POST",
                data: (function () {
                    var select = $("#issue-574-checker-select");
                    var result = {};
                    result[select.attr("name")] = select.val();
                    return result;
                })() // have to use self-evaluating function here
            });'
        )
    )
);

WARNING Please, as with all other such examples, do NOT write Javascript click handlers like the above. This is only for illustration purposes so examples would be self-contained. Your Javascript handlers should always be in separate Javascript source files.