Yii 1.1: yiiselect2

Wrapper Widget to use jQuery Plugin Select2 in Yii application. Recognized by Igor Vaynberg (Creator of Select2)
9 followers

Wrapper Widget to use jQuery Plugin Select2 in Yii application.

Recognized by Igor Vaynberg (Creator of Select2)

Select2 script: https://github.com/ivaynberg/select2

Requirements

Yii 1.1.13 (Not tested in others)

Usage

In your source code

Yii::import('ext.select2.Select2');

Or in config

...
    'import' => array(
        ...
        'ext.select2.Select2',
        ...
    ),
    ...

Example:

...
    echo Select2::multiSelect("test", null, array('test1','test2'), array(
        'required' => 'required',
        'placeholder' => 'This is a placeholder',
        'select2Options' => array(
            'maximumSelectionSize' => 2,
        ),
    ));
    ...

Or this

...
    $this->widget('Select2', array(
       'name' => 'inputName',
       'value' => 2,
       'data' => array(
           1 => 'Option 1',
           2 => 'Option 2',
           3 => 'Option 3',
           4 => 'Option 4',
        ),
    ));
    ...

Resources

Total 6 comments

#15039 report it
StreetCoder at 2013/10/01 03:35am
Multiple select does not work

Hi Everybody,

I can work with single select but unfortunately couldn't work with multi-select.

form:

<div class="row">
        <?php echo $form->labelEx($model,'item_list'); ?>
        <?php
        $data = CHtml::listData(Products::model()->findAll(),'id', 'name');
        echo Select2::multiSelect('item_list', $model->item_list, $data, array(
            'required' => 'required',
            'style' => 'width: 270px;',
            'placeholder' => 'Add Products',
            'select2Options' => array(),
        ));
        ?>
        <?php echo $form->error($model,'item_list'); ?>
    </div>

controller:

public function actionCreate()
    {
        $model=new Order;
        $model->setScenario('item_list');
 
        // Uncomment the following line if AJAX validation is needed
        // $this->performAjaxValidation($model);
 
        if(isset($_POST['Order']))
        {
            //echo $model->item_list;
 
            $model->attributes=$_POST['Order'];
            echo $model->registration_id;
            print_r($model->item_list);
            //print_r(item_list);
            //print_r($model->item_list);
            /*if($model->save())
                $this->redirect(array('view','id'=>$model->id));*/
        }
 
        $this->render('create',array(
            'model'=>$model,
        ));
    }

I couldn't receive value in controller. Please help me anybody.

Thanks,

#12694 report it
Daniel at 2013/04/05 09:16pm
generated code

Hi,

The generated code for select :

an style="margin-top: 10px;" class="span3">
                    <input type="hidden" value="130406030849" id="TransactionDetail_transactionFk" name="TransactionDetail[transactionFk]">                    <select name="TransactionDetail[productFk]" id="TransactionDetail_productFk" placeholder="Barcode" style="width: 100%" class="pull-left">
<option value="">Cari produk...</option>
<option value="2">PANCI [456456456456] </option>
<option value="1">Toples [123123123123] </option>
</select>                </span>

While the javascript generated is

<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
$('#TransactionDetail_productFk').select2({'placeholder':'Barcode','allowClear':true,'createSearchChoice':function(term){ return {id:term, text:term} }});
...

If I commented createSearchChoice line, the select2 seemed works since I can see the placeholder and the select is a select2 css. But when I uncomment the createSearchChoice, then select2 seemed not applied. Instead a normal select dropdown is applied.

commented/uncommented the allowclear does not give any different result. But both makes the select2 applied.

By meaning select2 is applied, css for dropdown is different in addition to that I can search from the options.

Thanks you for your prompt and continuous support. Anyway, this is a great extension.

#12691 report it
Tonin De Rosso Bolzan at 2013/04/05 11:06am
Verify your generated code

Please verify the generated html script in source code. And contact me in forum.

#12690 report it
Daniel at 2013/04/05 09:47am
still not working.....

I created like this

<?php
echo Select2::activeDropDownList(
            $newDetail, 'productFk', Product::model()->getProductOptions(), array(
                        'empty' => 'Cari produk...',
                        'class' => 'pull-left',
                        'style' => 'width: 100%',
                        'placeholder' => 'Barcode',
                        'select2Options' => array(
                            'allowClear' => true,
//                            'createSearchChoice' => 'js:function(term){ return {id:term, text:term} }'
                        ),
                    ));
                    ?>

allowClear cannot show the 'X' button next to the selected value.

createSearchChoice makes the Select2 not working, back to only dropdown.

Any help?

#12687 report it
Tonin De Rosso Bolzan at 2013/04/05 09:12am
See ivaynberg.github.com/select2

All options array "select2Options" are passed to the "CJavaScript::encode()" and sent directly to the "$settings" in select2

$('#id').select2({$settings});

Porting "allowClear" should work. "createSearchOptions" does not exist try "createSearchChoice"

#12676 report it
Daniel at 2013/04/05 01:23am
Add new option also clear options

Hi,

How to implement createsearchoptions using this? Also clear options? I used this without success ;(

<?php
                    echo Select2::activeDropDownList(
                            $newDetail, 'productFk', Product::model()->getProductOptions(), array(
                        'style' => 'width: 270px;',
                        'placeholder' => 'Barcode',
                        'select2Options' => array(
                            'allowClear' => true,
                            'createSearchOptions' => 'js:function(term){ return {id:term, text:term} }'
                        ),
                            )
                    );
                    ?>

Cheers,

Daniel

Leave a comment

Please to leave your comment.

Create extension