yii-select2 Select2 extension for Yii with event binding support and ajax text field option

  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);});

...

2 0
6 followers
922 downloads
Yii Version: 1.1
License: GPL-3.0
Category: Others
Developed by: omeraslam
Created on: Aug 8, 2014
Last updated: 9 years ago

Downloads

show all

Related Extensions