echosen

Yii Framework Extensions

Popular Tags

echosen This extension is a wrapper for Chosen JavaScript plugin which makes select boxes more user-friendly.

Requirements
Installation
Using extension
Resources
Notes

EChosen is an extension for Yii framework. This extension is a wrapper for Chosen JavaScript plugin which makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

Requirements ¶

Yii 1.1 or above (tested on 1.1.8)
jQuery or Prototype

Installation ¶

Move EChosen folder in your applications extensions folder (default: protected/extensions).

Using extension ¶

Just place the following code inside your view file:

<?php $this->widget( 'ext.EChosen.EChosen' ); ?>

You can also change some default settings:

<?php $this->widget( 'ext.EChosen.EChosen', array(
  'target' => 'select',
  'useJQuery' => false,
  'debug' => true,
)); ?>

target jQuery selector for elements to apply this plugin to (default: .chzn-select)
useJQuery use jQuery framework on true, Prototype on false (default: true)
debug use un-minified .js of plugin (default: false)

You will also need to add chzn-select class to your select elements you want to apply this plugin or if you use jQuery framework you can just change the selector.

Resources ¶

Notes ¶

For your convenience extension contains Chosen JavaScript plugin. Hovewer to make sure you have the newest plugin you should download it from Chosen JavaScript plugin Git repository

78 0

86 followers

4 190 downloads

Yii Version: 1.1

License: MIT

Category: User Interface

Tags: chosen plugin, form, javascript, select, user interface

Developed by: ifdattic

Created on: Aug 11, 2011

Last updated: 12 years ago

Downloads

show all

Related Extensions

User Contributed Notes 21

#4758

1 0

Very good

Thanks for this extension.

I'm having a little trouble with the width of generated selects. They are all rendered smaller than the content.

I've tried to find any css class that should be messing it up but found nothing. In firebug it shows something like

element.style {

width: 63px;

}

And it should be at least 100px wide to cover all the content

Any help would be very appreciated!

Regards!

EDIT:
for those who face the same thing, a simple css

select{min-width:300px} solved the problem for me

now the generated element is 281px wide

regards!

Junior - df9 at Aug 12, 2011, 12:27:54 AM

#4765

0 0

for dropdownList added by javascript, chosen is not shown

Hi,

I followed zacarria way to add the detail (http://www.yiiframework.com/wiki/141/javascript-tabular-input/), chosen is attached to the first row, next row generated by javascript would not have chosen shown.

I tried to modify the script to use .live, but not working so far.....

Any help?

Cheers,

Daniel

Daniel at Aug 13, 2011, 1:57:00 PM

#4768

0 0

@adinugro

Hi Daniel,

.live won't work as it adds events to elements. What you need to do is add

[javascript]
$( 'select' ).chosen();

after you insert a new select with JavaScript.

Sorry can't explain it in more details, it's just that damn WYMeditor extension sucked out all life from me today, hard to think, you will just have to figure the rest by yourself ;)

Andrew

ifdattic at Aug 13, 2011, 5:08:14 PM

#4771

0 0

ajax dropdown problem

Thanks for this great extension.
i have a little problem, i cannot make it work for dynamic dropdownlist.
Regards.

javed alam at Aug 14, 2011, 3:43:59 AM

#4773

0 0

@javedkhan

You have to run (more info on http://harvesthq.github.com/chosen/):

[javascript]
$("#form_field").trigger("liszt:updated");

ifdattic at Aug 14, 2011, 8:55:10 AM

#4808

0 0

update div based on selection by echosen

Hi Andrew,

Thanks, your solution to my previous question is working as expected. Now another problem, I have a form where the echosen is used for the product name, I wanted to show the unit of the product next to the quantity. The unit is based on the selected product from the echosen. The unit is updated on every changes of the selection of the echosen. Any solution to this problem?

Thanks a lot.

Daniel at Aug 18, 2011, 1:41:58 PM

#4811

0 0

@adinugro

You should dig into Chosen plugin (not extension) source code and check if there is an option for a callback after change or select or something like that. As I just made this extension to replace native select boxes and haven't checked all the posibilities of the plugin, as currently I'm working on other stuff.

If there is no option for a callback, you can try to add an on change event to your select input with the code which will update unit and plugin if needed. Or something like that.

ifdattic at Aug 18, 2011, 5:10:02 PM

#5495

0 0

select box width extremely small

as someone else mentioned.
its smaller in firefox than it is in chrome.
It's due to element.style but can't find out what's setting it.
setting a default width does not work for everything.
I'm guessing its something to do with yii getting the results from the db and the script knowing what to set the size as.
Any insight would be appreciated.

vegdev at Oct 16, 2011, 5:00:44 PM

#5497

0 0

select box width

I've discovered that this line in chosen.jquery has something to do with it, if I put a static width in it that's what shows on the page. So it looks like its having issues communicating with the results from yii.

style:"width: "+this.f_width+"px;"}

I could also be totally wrong, the select size is generally determined by the browser, but it appears its 100% and is only stretching as far as the surrounding div which is an incorrect width

vegdev at Oct 17, 2011, 2:48:49 AM

#6359

0 0

Display the 'X' to clear the field

Hello,
First I would like to thank the extension ...
I'd like to know how to display the 'X' in the dropdown to clear the field?
I saw the http://harvesthq.github.com/chosen/ that you can set the attribute 'allow_single_deselect: true' but can not reproduce in the extension.
Thanks

Bruno Piaui at Jan 3, 2012, 1:19:48 AM

#6691

0 0

Display the 'X' to clear the field

To display the 'X' to clear the field extension needs to be modified in that way

Extension also needs to be edited in order to obtain select and select-deselect fields on the same page.

Add this to class variables

/**
* @var array native options
*/
public $options = array();

And and then modify run function

public function run()
{
	// Publish extension assets
$assets=Yii::app()->getAssetManager()->publish(Yii::getPathOfAlias('ext.echosen').'/assets');
	$cs=Yii::app()->getClientScript();
	$cs->registerCssFile($assets.'/chosen.css');

	// Get extension for JavaScript file
	$ext='.min.js';
	if ($this->debug)
		$ext='.js';

	if ($this->useJQuery)
	{
		$options=CJSON::encode($this->options); // <-- HERE
		$cs->registerScriptFile($assets.'/chosen.jquery'.$ext);
		$cs->registerScript("chosen{$this->target}", "$( '{$this->target}' ).chosen({$options});"); // <-- HERE
	}
	else
	{
		$cs->registerScriptFile($assets.'/chosen.proto'.$ext);
	}
}

makro at Jan 29, 2012, 9:08:02 AM

#6782

0 0

update

please update chosen to 0.9.7

yiimann at Feb 5, 2012, 11:20:06 AM

#6950

0 0

good

I love this extension, thanks.

yiimann at Feb 15, 2012, 5:03:50 PM

#7023

0 0

Version 1.5

It doesn't work for me. Am I wrong? I must delete CClientScript::POS_END from script registrations.

if you register script with same name you can't have single/multiselect/X on same page (see comment #6691)

makro at Feb 20, 2012, 8:07:40 AM

#7118

0 0

@makro

I added the script position option to the extension.

I will try to check the other issue in the weekend if I have some free time.

ifdattic at Feb 24, 2012, 2:18:10 PM

#7791

0 0

sorry...

forgive me if it's a stupid question. Since I'm not familiar with jQuery...

But how can i load the data...?

eg. how can i change the code
<?php $this->widget('zii.widgets.CListView', array(

'dataProvider'=>$dataProvider,
'itemView'=>'_view',
    'id'=>'modellistview',

)); ?>

to apply your plugin...?

jiaming at Apr 18, 2012, 10:05:04 PM

#8146

0 0

Icons

Anyone know how to add icons next to the list items?

Thanks!

mtzmedia at May 13, 2012, 4:59:10 AM

#8932

1 0

Still cannot display "X" echosen 1.5.1

Hi,

How can I display "X"on single select using echosen?

I tried

<script type="text/javascript"> 
    $("#Sales_customerFk").chosen({allow_single_deselect:true}); 
</script>

and

<?php $this->widget('EChosen', array('options' => array('allow_single_deselect' => true))); ?>

Both of them do not show the "X" after an option is selected.

Cheers,

Daniel

Daniel at Jul 8, 2012, 10:40:23 PM

#9001

0 0

why is it not working ????

ifollowed the steps as described above and as i did for countless extensions but i get this message

Alias "ext.EChosen.EChosen" is invalid. Make sure it points to an existing PHP file.

I fixed the problem , the steps to install it work for the previous version EChosen-1.5.zip

gunnit at Jul 12, 2012, 7:42:47 AM

#10082

1 0

more features

if anyone needs option adding feature, then checks this out:
git repo
using this, you can enable this extension to accept and add options which are not already in dropdown options.
you may get more details and usage from here:
more info on this

Hesam K at Oct 3, 2012, 7:40:12 PM

#10718

0 0

help

anyone please help me,

i have dropdownlist with echoosen.

it show 200records at once, can i justshow 10 records at first, so if any user want to select another records they can input/ search the name of records.

kfahmi at Nov 19, 2012, 7:11:27 AM

Categories