How to enter free text inside Select2 component?

Question

I am using JQuery Select2 component (see here: http://ivaynberg.github.io/select2/ ) but I have problem configuring it so it would serve dual purpose - as autosuggest for matching data but also as a text box for new entries. Can someone help me configure that component correctly, please?

score 3 · Answer 1 · edited Apr 14 '20 at 15:47

3

Instead of

$('#name').select2();

You can try to use this:

$('#name').select2({
    multiple: false,
    tags: true,
    createTag: function (tag) {
        return {id: tag.term, text: tag.term, tag: true};
    }
});

edited Apr 14 '20 at 15:47

Tân

1
15
56
102

answered Apr 14 '20 at 15:40

dzuffy

31
2

score 1 · Accepted Answer · answered Jul 29 '13 at 02:25

1

I believe you are looking for the Tagging option:

Select2 Tags documentation

It will allow you to set up your own data to match to but accepts custom inputs.

$("#e20").select2({               
    tags:["red", "green", "blue"],              
    tokenSeparators: [",", " "]
});

answered Jul 29 '13 at 02:25

Kelz

494
4
9

That will look really odd if you only want one item I'd suggest you use this instead: http://stackoverflow.com/questions/14577014/select2-dropdown-but-allow-new-values-by-user – user2019515 Jun 10 '14 at 00:53

How to enter free text inside Select2 component?

2 Answers2