1. Select2 Extension for Yii 1.1.15 (not tested with higher versions)
2. Whats new
3. Supported Events
4. Installation
5. Follow on github
6. Usage
7. Example:
8. Advanced
9. Initialize options with javascript function or expressions
10. Binding Events Examples with dropdown list

Select2 Extension for Yii 1.1.15 (not tested with higher versions) ¶

Extension to use jQuery Plugin Select2 in Yii application.

courtesy Select2 script: Ivan berg Selec2

Whats new ¶

Event binding support for select2 yii extension no need to write any line of javascript configure the whole dropdow via select2 extension

Supported Events ¶

change ¶

select2-opening ¶

select2-open ¶

select2-close ¶

select2-highlight ¶

select2-selecting ¶

select2-clearing ¶

select2-removing ¶

select2-removed ¶

select2-loaded ¶

select2-focus ¶

select2-blur ¶

Installation ¶

Download or clone this repository and paste in /protected/extensions/select2

Follow on github ¶

YiiSelect2 on Github

Usage ¶

Direct import into page

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

Or in config to make it avaiable overall site

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

Example: ¶

Simple call `Select2::dropDownList()`
Model reference  `Select2::activeDropDownList()`

Advanced ¶

    ...
    echo Select2::multiSelect("test", '', array('Apple','Banana','Orange','Apricot','Black Current'), 
        array(
            'required' => 'required',
            'select2Options' => array(
              'placeholder' => 'Please select a fruit',
              'maximumSelectionSize' => 4,
            ),
        )
    );
    ...
    echo Select2::activeMultiSelect($model, "attr", array('test1','test2'), array(
        'placeholder' => 'This is a placeholder',
    ));
    ...

Or this

    ...
    $this->widget('Select2', array(
       'name' => 'exampleInput',
       'value' => 1,
       'data' => array(
           1 => 'Apple',
           2 => 'Banana',
           3 => 'Orange',
           4 => 'Apricot',
        ),
    ));
    ...

Initialize options with javascript function or expressions ¶

Example populating text field with ajax support

...

echo Select2::dropDownList('location', '', array(), array(

  'empty'=>'',
  'id'=>'location',
  'style'=>'width:100%',
  'select2Options'=>array(
      'allowClear'=>true,
      'placeholder'=>'Type Location Here',
       'minimumInputLength'=>'3',
      'ajax'=>array(
          'url'=>'/homes/locationsajax/',
          'type'=>'GET',
          'dataType'=>'jsonp',

'data'=>new CJavaScriptExpression('function (term, page) {return {loc_name: term, page:page}}'), 'results'=>new CJavaScriptExpression('function (data, page) {return {results: data.locations}}'),

      ),
      'initSelection'=>new CJavaScriptExpression('function(element, callback) { '
                . 'var id=jQuery(element).val(); '
                . 'if (id!=="") {'
                . ' jQuery.ajax("/homes/locationsajax/loc_id/"+id, { dataType: "jsonp" } ).done( function(data) {'
                . 'callback(data);'
                . '});'
                . '}}'),
      'formatResult'=> new CJavaScriptExpression('locationFormatResult'),
      'formatSelection'=>new CJavaScriptExpression('locationFormatSelection'),
      'escapeMarkup'=>new CJavaScriptExpression('function (m) {return m;}'),
      )

)

                        );
...

following javascript is rendered by extension with the above piece of php code

  ...
  $('#location').select2(
            {
            'allowClear':true,
            'placeholder':'Type Location Here',
            'minimumInputLength':'3',
            'ajax':{
                'url':'/homes/locationsajax/',
                'type':'GET',
                'dataType':'jsonp',
                'data':function (term, page) {return {loc_name: term, page:page}},
                'results':function (data, page) {return {results:  data.locations}}},
                'initSelection':function(element, callback) { 
                    var id=jQuery(element).val(); 
                    if (id!=="") { 
                      jQuery.ajax("/homes/locationsajax/loc_id/"+id, { dataType: "jsonp" } )
                      .done( function(data) {
                              callback(data)
                              }
                        );
                    }
                  },
                  'formatResult':locationFormatResult,
                  'formatSelection':locationFormatSelection,
                  'escapeMarkup':function (m) {return m;}
            }
  );
  ...

Binding Events Examples with dropdown list ¶

A dropdown example triggering the events "select2-selecting" and "select2-removed" which fire on selecting a choice and clearing a choice

  ...

echo Select2::dropDownList('area_type', '', 
            array('sqft'=>'Square Feet','marla'=>'Marlas'),
            array('empty'=>'','id'=>'area_type','style'=>'width:100%',
                'select2Options'=>array(
                    'allowClear'=>true,
                    'placeholder'=>'Unit Type',
                    'onTrigger'=>array(
'select2-selecting'=>new CJavaScriptExpression('function(e) { console.log(e.object.id);}'),
'select2-removed'=>new CJavaScriptExpression('function(e) { console.log(e.choice.text);}'),
                    )
                    ),

                )
            );

...

The following javascript is rendered when you run the above piece of code

  ...
   $('#area_type').select2(

  {
    'allowClear':true,
    'placeholder':'Unit Type'
  }
)
.on('select2-selecting',function(e) { console.log(e.object.id);})
.on('select2-removed',function(e) { console.log(e.choice.text);});

...