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)
- Extract the downloaded file to your application extensions directory
- Just place the following code inside your view file:
// Working with 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, ), )); $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', ), ); // 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, )); $data=array( '1'=>'Satu', '2'=>'Dua', '3'=>'Tiga', ); // Multiple data $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'=>'Keren ya?', 'allowClear'=>true, ), ));
- February 15, 2013
- Update to select2 3.3
- November 29, 2012
- Update to select2 3.2, supporting jQuery events, new public method init()
- September 13, 2012
- Removing scriptPosition property (https://github.com/anggiaj/ESelect2/commit/9f7cf464f9ba16939ef57483fe71c2348c4b9732)
- August 21, 2012
- Assets update (select2 3.1)
- Added translation support, (id,pl)
- Credits: https://github.com/nineinchnick
- July 09, 2012
- New public property $selector, to select any input[type=text] or other Html element
- jQuery select2 fixes #192
- June 20, 2012
- Opt group and assets path fix (thanks to Porcelanosa)
- June 19, 2012
- Placeholder fix
took me some modification to enable multiple selects.. just thought you wanted to know.
the example code not really helpful. How to enable the multiple select in select2 widget?
All the example code above need write inside the script as below?? Somehow it can't work after do like that, need more help pls.
jowen start by reading my previous comment
then, read the select2 documentation, it clearly says the select needs a multiple="" attribut. This extension misses the option but it is easy to do.
then a bit down
Since now I was using "echosen". But this wrapper is many many better! Thanks for such good doc!
placeholder can't work for me..
Is there any error for the code below?? The placeholder can't show at all.. Thanks.
Sorry, my english is bad...
Cannot use "placeholder" options [fixed]
I'm trying to use placeholder options. Here is my code:
And, the placeholder is not working. Any suggestion?
Here is the solution
Using above syntax will make placeholder working along with allowClear. Thanks @nk913 for helping me! :D
How change ESelect2 value to "placeholder" using jQuery?
Hi, I want to change my Select2 widget value programatically using jQuery.
For example i want to do this:
I already trying
But it just not working. Any sugestion?
Just found it. You can use
It will revert its value to placeholder value
Error in release select2-20120619
must be I think
Can You Publish ChangeLog?
optgroup still don`t work in this last release
@Porcelanosa thank you, please check 20120620 release it's include opt group
Width of block
Thanx! OptGroup work pefect
I use twitter bootstrap: and when I want to set width for select by class="span4" for example layout is crashed.
How and when you calculate the width of block and how I can set it?
_POST is array
if multiplу=false the $_POST is array anyway
In last version it been intenger or string
UPD i`m sorry In previos version POSt is array too
To support the 'tags' feature (adding free values, no need to select from the list) of select2 you have to output a textField instead of a dropdownlist.
So you have to change the source like below:
Assign 'options.tags' instead of the 'data' attribute:
Hey guys I have a dropdown that is dependent on the value input into a select 2 dropdown. I have made dependent dropdowns with a regular select box, but the select 2 widget doesn't have an attribute called AJAX. Can anyone help me with the syntax?
Hi, How to HTML-encode the displayed data?
As a example, one of the items displayed has the following string stored in the DB:
<b>t</b>extand I'd like to display it that way.
If you use the following:
The data won't be HTML-encoded and will be presented as-is. This is, the HTML will be rendered and in this example it will display as: text (with the 't' in bold) Yii documentation suggests to use encodeArray. However, if you do the following:
The data will be presented as if it was double HTML-encoded. This is, it will show
How to correctly HTML-encode the data? Thank you.
Example for the ""initSelection"" option
In one of my applications I needed to initialize the select2 instance with some preselected values, which I had to load via ajax. I had to tinker a bit with the initSelection option to get it to work.
Here is my code, in case anybody needs something similar...
In the view file we have:
The action that is called via ajax and provides the preselected model-data looks like this:
Thanks for this great extension and best regards...
Please refer to http://ivaynberg.github.com/select2/ docs
Please refer to http://ivaynberg.github.com/select2/, you will find the complete documentation about those functions
Some data are Lost
I just want to point out something,
in the description of this extension for using multiple data, the $data elements must have unique ids, that would effect the view and the selection, just to avoid some elements to be removed since some have the same id.
this is the code in the extension description.
and this is how the $data must be defined.
I'm sorry this might appear as a beginner point, but I had a friend which had a problem in testing this extension as some elements were disappeared from the menu due the duplicate of the ids.
Thanks, nice written extension.
another initSelection function
can be found here
Couldn`t use ajax on github version
I got the updated version through github, and I needed to create a input hidden field to run ajax. I changed the run method, line 66:
Worked for me, hope it helps.
Add new option
How could I add new option? I googled and found 'createSearchOptions', but don;t know how to use it.....
I tried by putting on the options array but the result is that select2 is not working ;(
Using Eselect2 together with Multimodelform Extension
The details how one should use this excellent widget together with Multimodelform extension are described here.
When attaching an ajax call to the ESelect2 I can't get any dropdownlist on the gui.
What am I doing wrong?
Problem with large number os objects
I'm trying to use select2 (without ajax) 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?
@Bianchi for large lists (above 100 items) i suggest you use the infinite scrolling/ajax response http://ivaynberg.github.io/select2/#infinite
AutoComplete in a project
hi, thanks for very good extention.
i have a problem. when i want type another data in select2(with htmlOptions multiple) can not do it. how can do?
Namely i want used this in autocomplete format and suggest tags to user.
Is it possible?
Is it possible to only search, with ajax, after the user click on a button?
multiple and default value
I use select2 on a form:
It works fine but I want to put there data if they exists in the "field". How to do this and how to format it? I was trying to use tags but it didn't work.
How To Load Selected Data?
I have this in my _form:
I use it on create method. How can I use it on update method with preload selected data?
Setting the initial text to display for foreign key fields
If you are using the select2 with an existing foreign key,
initSelectioncan be used to set the text e.g. where
parentis the foreign key:
Select all for multiple data
Nice extension. I wonder, is there any way that I can get a "select all"-button for this? So instead of the user having to type every posiblity they could just click this button to select them all and populate it into the box? As a fast way for the user to select everyone exept two for example.
I'm trying to work with select2 using ajax because my database query has more than 5,000 lines.
But the result of the ajax. it does not filter the query, bringing the entire query on the screen.
how to save
how to save the data using this extension?
Re: how to save
You get the data sent as post when you click on submit. Use this code to see what was posted:
But does anyone know how I can make a select-all option? I'm using // Multiple data
I really would need this to work.
already selected tags
Please tell me somebody, how to select tags already ! like on update.
I think you mean pre-selecting values. This comment should help...
c@cba yes pre-selection but for tags
Thanks for quick reply !
yes, i m talking about pre-selection but for tags NOT for mulitselect dropdown like http://ivaynberg.github.io/select2/, and link provided by u is't working !.
In my case i want to show all the tags on desired field on update !!!!.
If someone has the same problem, solution follows:
Losing data on update
I have a problem!
When i use the update form it loses the tags unless i input them again.
If i have tags
Yii, Select2, Demo
in the field it will save them just fine and show them in the view.
When i go to update the field is blank. So if i save the form again without putting the tags back it it won't save.
But if i have just one tag
It will show Yii in the update form as the value and save fine.
So it only does it if there are two or more tags
anyone have the same problem and know a solution?
EDIT: SOLVED IT:
Ajax + Preselect
i have a quesiton, if it is possible to combine AJAX and preselect values? Kind of:
Use in options the initSelection method:
Update not working....
i have following code in form but when i come back for update the value is not getting selected.
I have customers name in different table i am mapping them. any idea what i am doing wrong...
data not loaded
A I do not load my data.
So I have
This is my controller
I do not show all records
Thanks for your help
Set Selected Value
Help! I want to select a specific value inside this dropdown list. The data inside are 1=>Direct, 2=>Corporate, 3=>Travel. I want to default the selected direct. Pls Help!
Adding pre-selected values
I think I had your same need so I'm sharing my solution with you and anyone who could benefit and/or improve it.
In my view:
Hope this can help.
Solved! Problem #18256
Thanks for your magnificent answer @MasterQ!
Helped me a lot. Thanks and God Bless!
Very helpfull extension
Thanks for this ext, very nice for me!
Really Good! How to implement Select2 in TbGridView?
I want to use Select2 Extension in TbGridView. I am using that extension in form, that's ok. But in case of TbGridView I facing problem.
Limiting the number of selections
i want to use top limit. for example, the user selected only three values from all values. how can do it?
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.