nineinchnick/select2

Wrapper for ivaynberg jQuery select2

Installs: 757

Dependents: 1

Stars: 2

Watchers: 4

Forks: 15

Language: JavaScript

3.4.6 2014-04-04 11:07 UTC

README

ESelect2 is a widget extension for Yii framework. This extension is a wrapper for Select2 Jquery plugin (https://github.com/ivaynberg/select2).

  • Yii 1.1 or above (tested on 1.1.10)

Usage

  • Extract the downloaded file to your application extensions directory
  • Use it at your view

Examples

Basic

$this->widget('ext.select2.ESelect2', array(
 'name' => 'selectInput',
    'data' => array(
        0 => 'Nol',
        1 => 'Satu',
        2 => 'Dua',
    )
));

Working with model

$this->widget('ext.select2.ESelect2', array(
    'model' => $model,
    'attribute' => 'attrName',
    'data' => array(
        0 => 'Nol',
        1 => 'Satu',
        2 => 'Dua',
    ),
));

Using selector

$tags = array('Satu', 'Dua', 'Tiga');
echo CHtml::textField('test', '', array('id' => 'test'));
$this->widget('ext.select2.ESelect2', array(
    'selector' => '#test',
    'options' => array(
        'tags' => $tags,
    ),
));

Using optgroup

$data = array(
    'one' => array(
        '1' => 'Satu',
        '2' => 'Dua',
        '3' => 'Tiga',
    ),
    'two' => array(
        '4' => 'Sidji',
        '5' => 'Loro',
        '6' => 'Telu',
    ),
    'three' => array(
        '7' => 'Hiji',
        '8' => 'Dua',
        '9' => 'Tilu',
    ),
);

$this->widget('ext.select2.ESelect2', array(
    'name' => 'testing',
    'data' => $data,
));

Multiple data

$data = array(
    '1' => 'Satu',
    '2' => 'Dua',
    '3' => 'Tiga',
);

$this->widget('ext.select2.ESelect2', array(
    'name' => 'ajebajeb',
    'data' => $data,
    'htmlOptions' => array(
        'multiple' => 'multiple',
    ),
));

Placeholder

$this->widget('ext.select2.ESelect2', array(
    'name' => 'asik2x',
    'data' => $data,
    'options' => array(
        'placeholder' => Yii::t('select2', 'Keren ya?'),
        'allowClear' => true,
    ),
));

Working with remote data

echo CHtml::textField('movieSearch', '', array('class' => 'span5'));
$this->widget('ext.select2.ESelect2', array(
    'selector' => '#movieSearch',
    'options' => array(
        'placeholder' => 'Search a movie',
        'minimumInputLength' => 1,
        'ajax' => array(
            'url' => 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
            'dataType' => 'jsonp',
            'data' => 'js: function(term,page) {
                    return {
                        q: term, 
                        page_limit: 10,
                        apikey: "e5mnmyr86jzb9dhae3ksgd73" // Please create your own key!
                    };
                }',
            'results' => 'js: function(data,page){
                return {results: data.movies};
            }',
        ),
        'formatResult' => 'js:function(movie){
            var markup = "<table class=\"movie-result\"><tr>";
            if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
                markup += "<td class=\"movie-image\"><img src=\"" + movie.posters.thumbnail + "\"/></td>";
            }
            markup += "<td class=\"movie-info\"><div class=\"movie-title\">" + movie.title + "</div>";
            if (movie.critics_consensus !== undefined) {
                markup += "<div class=\"movie-synopsis\">" + movie.critics_consensus + "</div>";
            }
            else if (movie.synopsis !== undefined) {
                markup += "<div class=\"movie-synopsis\">" + movie.synopsis + "</div>";
            }
            markup += "</td></tr></table>";
            return markup;
        }',
        'formatSelection' => 'js: function(movie) {
            return movie.title;
        }',
    ),
));

Resources