Yii 1.1: chosen

Anouther chosen extension, provides easy to use InputWidget
22 followers

This extension is a wrapper for Chosen JavaScript plugin which makes long, unwieldy select boxes much more user-friendly.

Requirements

Tested with Yii 1.1.10, but should work with previous versions too

Usage

  1. Checkout source code to your project, for example to ext.chosen
  2. Use it, as any input widget

Example:

$this->widget('ext.chosen.Chosen',array(
   'name' => 'inputName', // input name
   'value' => '2', // selection
   'data' => array( // list of select options
       '1'=>'Option 1',
       '2'=>'Option 2',
       '3'=>'Option 3',
       '4'=>'Option 4',
    ),
));

Also you can use it like CHtml helper

Before this import ext.chosen.Chosen, you can add it to config/main.php or call Yii::import('ext.chosen.Chosen') before usage.

Chosen::dropDownList($name, $select, $data, $htmlOptions);
Chosen::activeDropDownList($model, $attribute, $data, $htmlOptions);
Chosen::multiSelect($name, $select, $data, $htmlOptions);
Chosen::activeMultiSelect($model, $attribute, $data, $htmlOptions);

Also if you need to specify some options for widget when using helper - you can use options key, for example:

echo Chosen::multiSelect($name, $select, $data,
    array(
       'data-placeholder' => 'Tags',
       'options'=>array(
          'maxSelectedOptions' => 3,
          'displaySelectedOptions' => true,
    )));

Changes

  • March 25, 2014 Upgrade chosen to 1.1.0
  • October 27, 2013 Add support for new configuration options
  • October 19, 2013 Upgrade chosen to 1.0.0
  • June 25, 2013 Upgrade chosen to 0.10.0, added searchContains option.
  • March 19, 2013 Allow to set placeholder through "data-placeholder" in htmlOptions, when using Chosen::* methods.
  • February 13, 2013 Fixed bug when resolving value by attribute name
  • December 12, 2012 Update chosen to version 0.9.11
  • August 5, 2012 Fixed bug when using as input widget(not like CHtml helper)
  • July 23, 2012 Fixed bug in Chosen::activeMultiSelect

Resources

Total 12 comments

#16990 report it
Javed Iqbal at 2014/04/19 06:53am
Optiongroup

How it can be handle for optiongroup. I want dropdownlist in following format:

<optiongroup label="BS">
<option>Javed Iqbal Hunzai</option>
<option>Aslam Karim</option>
</optiongroup>
<optiongroup label="MS">
<option>Junaid Iqbal</option>
<option>Ubaid Ali</option>
</optiongroup>

I have used chosen using following line of code:

echo Chosen::activeDropDownList($model, 'student_id', CHtml::listData(Common::getListStudent(), 'id', 'name'));

where Common::getListStudent() returns following array:

Array
(
    [0] => Array
        (
            [name] => Javed Iqbal Hunzai
            [id] => 25
        )
 
    [1] => Array
        (
            [name] => Ubaid Ali
            [id] => 26
        )
)
#15308 report it
prPixabit at 2013/10/27 07:34am
Re: Re: Set Options

Thank you so much! You updated the extension in a shorter time period than I spent searching for a possibility how to do this. Terrific work!

#15307 report it
Bogdan Savluk at 2013/10/27 07:28am
Re: Set Options

Originally there was no such options in chosen(they appear only recently, and I did not noticed that). Updated extension, added example about helper usage for you case

#15306 report it
prPixabit at 2013/10/27 05:32am
Set Options

Can anyone get the options "display_selected_options" and the "max_selected_options" to work? I use yii like this and it does not work:

echo Chosen::multiSelect('activityTypeTags', '', ActivityType::getActivityType('tag'), array('data-placeholder' => 'Tags', 'max_selected_options' => 3, 'display_selected_options' => false));

Or like this:

echo Chosen::multiSelect('activityTypeTags', '', ActivityType::getActivityType('tag'), array('data-placeholder' => 'Tags', 'max_selected_options' => '3', 'display_selected_options' => 'false'));

I even tried rewriting the default settings in chosen.jquery but somehow this was ignored too...

#14035 report it
Bogdan Savluk at 2013/07/12 03:28pm
Re: Problem with large number os objects

In my case chosen with 10k options - works, but with notable delays. Delay is because dynamic creation of such nodes number in DOM is too heavy.

Take a look to select2, which is more suitable for large datasets, there is such features as minimum input(for filtering), and remote data support(may be also useful in this case). Also there is yii extension for select2.

#14028 report it
Bianchi at 2013/07/12 11:19am
Problem with large number os objects

I'm trying to use chosen but I'm having problems when using a large number of objects (around 10k). When i click on the generated select the browser freezes and give me a message "The script doesn't respond" with an option to wait or abort.

Any thoughts anyone?

#13084 report it
ineersa at 2013/05/03 06:03am
Adding disable_search function and others

Got some issues when needed to disable search on some selects and found out that you dont have such features. So here is some code :

In file Chosen.php init() function add

if (isset($this->htmlOptions['disable_search']))
            $this->settings['disable_search'] = $this->htmlOptions['disable_search'];

Then in your view :

<?php echo Chosen::activeDropDownList($model, 'gender', array('male' => 'Male', 'female' => 'Female'), array('empty' => "Select gender","disable_search"=>true)); ?>

You can do same for all other features. Hope it will be usefull for someone.

#11897 report it
jneto at 2013/02/11 08:13pm
Problem with Tabular Input ( my solution )

Still don't work with double quotes.

So i find that in all CHtml active widgets, they use

self::resolveNameID($model,$attribute,$htmlOptions);

In the documentation of resolveNameID

 * Generates input name and ID for a model attribute.
 * This method will update the HTML options by setting appropriate 'name' and 'id' attributes.
 * This method may also modify the attribute name if the name
 * contains square brackets (mainly used in tabular input).

So i add the

CHtml::resolveNameID($model,$attribute,$htmlOptions);

in your function and now it works.

public static function activeDropDownList($model, $attribute, $data, $htmlOptions = array())
    {
        CHtml::resolveNameID($model,$attribute,$htmlOptions);
        return self::dropDownList(CHtml::activeName($model, $attribute), CHtml::value($model, $attribute), $data, $htmlOptions);
    }

I'm new in YII, so i don't know if it was the right thing to do.

#11887 report it
Bogdan Savluk at 2013/02/11 10:05am
Re: Problem with Tabular Input

Widget supports tabular input(CHtml::activeName, is used to resolve input name), seems problem is in quotes used for attribute name, try with double quotes: Chosen::activeDropDownList($car, "[$i]state", $list, $htmlOptions);

#11883 report it
jneto at 2013/02/11 08:13am
Problem with Tabular Input

I can't use Chosen::activeDropDownList($car, '[$i]state', $list, $htmlOptions);

Thanks.

#10616 report it
Bogdan Savluk at 2012/11/08 06:09am
Re: Why property $settings is set as private in Chosen.php?

Because there are separate properties in widget, to change this settings: ($placeholderMultiple, $placeholderSingle, $allowSingleDeselect, $noResults). Also some properties have internationalized default values(originally script has no i18n).
If I have missed some configuration options: add issue or make pull request on bitbucket - I will add them.

#10613 report it
letsjump at 2012/11/08 03:40am
Great work!

You saved my life, dude!

Just one question:

Why property $settings is set as private in Chosen.php? Are there other ways to pass the javascript options to .chosen({$settings})?

Thanks a lot!

Leave a comment

Please to leave your comment.

Create extension