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 ¶
- Checkout source code to your project, for example to ext.chosen
- 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
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!
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.
Problem with Tabular Input
I can't use
Chosen::activeDropDownList($car, '[$i]state', $list, $htmlOptions);
Thanks.
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);
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
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.
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.
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?
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.
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...
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
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!
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 ) )
working fine, grt work
thank you...............
Thank you!
Great Extension...
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.