yii-selectize

Wrapper for the Brian Reavis' jQuery selectize.js UI control
24 followers

yii-selectize is a wrapper for the jQuery selectize.js UI control created by Brian Reavis. This extension can be used with or without a model. It also supports configuration using widgetFactory and provides basic css adjustment to work with the default Yii 1.x theme or Twitter Bootstrap.

What's new

  • Added example module
  • Updated selectize.js to version 0.9.0

Requirements

  • Yii 1.1 (tested on version 1.1.14)

Setup

  • Extract the downloaded file in your extensions folder (protected/extensions/)

Usage

Note: a demo module is available in the "example" folder. Just copy it from the example folder to your modules folders and enable it in your config file.

single selection: using active record

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ), 
    'fullWidth' => false,
    'placeholder' => 'Write here!',
));

single selection: used alongside twitter bootstrap

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'useWithBootstrap' => true,
//    'cssTheme' => 'bootstrap2', // uncomment to use v2 theme instead of v3
    'fullWidth' => false,
));

single selection: without active record

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'name' => 'test2',
    'value' => 'world', // the selected item
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
));

multiple selection (tagging)

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'name' => 'test4',
    'value' => 'world',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'selectedValues' => array('hello', 'world'),
    'fullWidth' => false,
    'htmlOptions' => array(
        'style' => 'width: 50%',
    ),
    'multiple' => true,
));

using events callbacks

php:

$this->widget('ext.yii-selectize.YiiSelectize', array(
    'model' => $model,
    'attribute' => 'test',
    'data' => array(
        'hello' => 'Hello',
        'world' => 'World',
    ),
    'callbacks' => array(
        'onChange' => 'myOnChangeTest',
        'onOptionAdd' => 'newTagAdded',
    ),
));

javascript:

function myOnChangeTest(value) {
    console.log(value);
}
 
function newTagAdded(value, $item) {
    console.log('new item: ' + value);
    console.log($item);
}

widgetFactory configuration example (main.php)

'widgetFactory' => array(
    'widgets' => array(
        'YiiSelectize' => array(
            'defaultOptions' => array(
                'create' => false,
            ),
        ),
    ),
),

Resources

Total 13 comments

#18746 report it
Firebreaker at 2014/12/24 11:26pm
Nice extension

Hi, jquery selectize has plugin supports. I can't manage to get it using 0.5 version yii-selectize. How to do this? or is it already supported?

#16809 report it
Giovanni D. at 2014/03/30 01:31pm
version 0.5

Hello, I've released version 0.5 which includes selectize.js 0.9.0 :)

@bhawin: it shouldn't be using the less files. maybe it is due to some browser extension (?).

The new release also includes a demo module that you can use to test it (copy it from the examples folder to your module folders and enable it in your config file)

#16722 report it
bhawin at 2014/03/22 03:07pm
@giovanni , i cleaned up assets folder and opened firebug for checking javascript error , there is no error found

this is the code where i found the error

file path extensions/selectize/vendors/selectize.js/src/less/selectize.bootstrap2.less

line no 91. [data-selectable].active { #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); }

#16720 report it
Giovanni D. at 2014/03/22 02:47pm
@bhawin

try to clean your assets folder and check if you have any javascript error. I'm using it for a project I'm working on and it is working for me.

#16719 report it
bhawin at 2014/03/22 02:40pm
not working properly?

it is not showing the textbox .

#16289 report it
prPixabit at 2014/02/06 04:55pm
Working with js-options of yii-selectize

"I would be too interested in setting the widgets selected values via js;"

Came a little closer to solving this. First of all I have to create js-function which is triggered e.g. on initialize; then I need to initialize the selectize control and fetch my instance. On this instance I can use all js-funtions of the extension.

Yii::app()->clientScript->registerScript('onInitialize', ' function onInitialize(value){
   //initializing selectize control
    var $select = $("select").selectize();
   //dumping all available instances to debugging console
    console.log($select);
   //selecting the right instance
    var selectize = $select[0].selectize;
   //using one of the selectize-commands on the selected instance
    selectize.focus();
}');

Unfortunately this creates duplicate selectize input fields for all my exisiting selectize widget instances on the page. These fields are not functional as they have no selection options but otherwise mirror my widgets in every aspect. What am I doing wrong?

#16159 report it
prPixabit at 2014/01/23 03:35pm
Setting selected value with js

I would be too interested in setting the widgets selected values via js; I know this can not be that difficult since I can easily set the value of regular text fields with

[js]
$("#myInputElement").val(someData);

but that does not work in this case; if I understand the documentation right, I would have to use the addItem()-function but I am not sure how to use it;

Sorry for this noob-question... Anyway, thanks for this great extension!

#15037 report it
Tsang at 2013/10/01 02:58am
How to assign tags the value?

Can this extension allow to assign a string like "hello,me,ok" when the extension on load?

I cannot simply use the "selectedValues" option to pre-assign the value to the extension because the value is new tag and is not included in the dataset. Can anyone help? I am newbie for this extension.

#15004 report it
nakovn at 2013/09/27 02:52pm
Can not type in input when i used selectize in dialog

Thanks for very usefull extension. But, when I used selectize in dialog, I can't type any character in input for search. And i want focus to another input when I selected. Anybody help me!

#14652 report it
Giovanni D. at 2013/09/01 11:49am
Thanks for your feedback!

Thanks guys for your feedback!

@Tsang: just released a new version... had few time to test it out so let me know if you spot any problem

#14626 report it
Tsang at 2013/08/29 11:40am
Very Good

Very good extension. Hope that you can maintain this extension in the future. Thanks for your work.

#14451 report it
Trần Minh Quang at 2013/08/12 07:18pm
Great and Cool Extension

Very very usefull extension ! Thanks thanks thanks......thanks to u :D

#14437 report it
Nur Rochim at 2013/08/11 11:56pm
Great and Cool Extension

Wow... Great Extension ! Thank you

Leave a comment

Please to leave your comment.

Create extension