README

jQuery插件Select2在Yii应用程序中的扩展。

感谢Select2脚本：https://github.com/ivaynberg/select2

## 新特性 Select2 yii扩展的事件绑定支持，无需编写任何JavaScript代码，通过Select2扩展配置整个下拉列表

安装

下载或克隆此仓库，并将其粘贴到 /protected/extensions/select2

使用方法

直接导入页面

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

或在配置中使其在整个网站上可用

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

示例

## 高级

    ...
    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',
    ));
    ...

或者这个

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

## 使用JavaScript函数或表达式初始化选项 示例：使用Ajax支持填充文本字段

    ...
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;}'),
          )
  )
                            );
    ...

以下JavaScript由扩展在上述PHP代码中渲染

  ...
  $('#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;}
            }
  );
  ...

## 绑定事件示例 使用下拉列表的下拉示例，触发“select2-selecting”和“select2-removed”事件，这些事件在选择一个选项和清除一个选项时触发

  ...
    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);}'),
                        )
                        ),

                    )
                );
  ...

运行上述代码时，以下JavaScript将被渲染

  ...
   $('#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);});
  ...