Select2 dropdown and allow new values

11,974 views
Skip to first unread message

daniel...@gmail.com

unread,
Feb 18, 2013, 2:31:32 PM2/18/13
to sel...@googlegroups.com
Hey,

I love the select2 script. Really useful and nifty. Now, I'm quite curious to get an answer on this: http://stackoverflow.com/questions/14577014/select2-dropdown-but-allow-new-values-by-user

"I want to have a dropdown with a set of values but also allow the user to "select" a new value not listed there.

I see that select2 support this if you are using it in tokens mode, but is there a way to do it without having tokens?"

Would be nice if this was easily configurable as some kind of setting. Currently it has to be a value in the dropdown, but it would be nice if I could set something like "allowAny" or something and allow whatever I typed in.

Thanks!

Diego Medina

unread,
Feb 18, 2013, 3:44:17 PM2/18/13
to sel...@googlegroups.com
I use this and works fine (I'm not using tokenizer)

$(selector).select2({
minimumInputLength:1,
"ajax": {
data:function (term, page) {
return { term:term, page:page };
},
dataType:"json",
quietMillis:100,
results: function (data, page) {
return {results: data.results};
},
"url": url
},
id: function(object) {
return object.text;
},
//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
});



the part that allows you to manually enter a value not on the drop down is

createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},

Regards,

Diego
> --
> You received this message because you are subscribed to the Google Groups "select2" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
> To post to this group, send email to sel...@googlegroups.com.
> Visit this group at http://groups.google.com/group/select2?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
Diego Medina
Lift/Scala Developer
di...@fmpwizard.com
http://fmpwizard.telegr.am

daniel...@gmail.com

unread,
Feb 18, 2013, 7:20:55 PM2/18/13
to sel...@googlegroups.com
Cool! I will try that soon. Is this something that will be added officially into the library?

Diego Medina

unread,
Feb 18, 2013, 7:55:37 PM2/18/13
to sel...@googlegroups.com
I'm really new to select2 (just started using it this weekend), but
what I understand is that having createSearchChoice be a function was
"adding as part of the library".

The way it is now, it gives you flexibility on what you can do, but I
guess you are thinking of just having something like

...
minimumInputLength: 1,
allowNewValues: true, //and then the library could take this and use
the code I posted
...


Regards,

Diego


On Mon, Feb 18, 2013 at 7:20 PM, <daniel...@gmail.com> wrote:
> Cool! I will try that soon. Is this something that will be added officially into the library?
>

daniel...@gmail.com

unread,
Feb 18, 2013, 8:12:28 PM2/18/13
to sel...@googlegroups.com
Exactly what I was thinking, but you're right in that the createSearchChoice function seems to be enough to do this type of thing. And it will also be flexible to do other things, which may be better actually.

daniel...@gmail.com

unread,
Feb 19, 2013, 5:21:41 AM2/19/13
to sel...@googlegroups.com, daniel...@gmail.com
Crap. So, I'm using Yii and the ESelect2 extension and I added it there and get:

Error: Option 'createSearchChoice' is not allowed for Select2 when attached to a <select> element.

What do you attach select2 too? Creating a div around the select element?

daniel...@gmail.com

unread,
Feb 19, 2013, 6:41:31 AM2/19/13
to sel...@googlegroups.com, daniel...@gmail.com
Ok, has to be a <input type="hidden" /> .. and I have to use query in select2.. man, this is starting to get complicated just to be able to enter values not in a list...

daniel...@gmail.com

unread,
Feb 19, 2013, 6:48:47 AM2/19/13
to sel...@googlegroups.com, daniel...@gmail.com
Could you be so kind and post a complete working example?

Diego Medina

unread,
Feb 19, 2013, 6:52:06 AM2/19/13
to sel...@googlegroups.com, daniel...@gmail.com

I attach it to a simple input field, I'll post the html in a bit

Diego
Sent from my android cell

On Feb 19, 2013 6:48 AM, <daniel...@gmail.com> wrote:
Could you be so kind and post a complete working example?

Diego Medina

unread,
Feb 19, 2013, 7:21:25 AM2/19/13
to sel...@googlegroups.com, danielakesson
hi,

see this gist
https://gist.github.com/fmpwizard/4985356

Regards

Diego

daniel...@gmail.com

unread,
Mar 6, 2013, 1:50:38 PM3/6/13
to sel...@googlegroups.com
Thanks!
Reply all
Reply to author
Forward
0 new messages