How to disable creating new tags with select2 v4.0?

Question

I've been trying out the new Select2 v4.0 which has a lot of improvements. I'm mainly interested in the tags feature. I want to be able to search for tags via ajax and only be able to select a tag from the shown results and not be able to create new tags. The functionality is similar to StackOverflow - if you don't have the necessary reputation you can't create new tags, but you can still tag a question with existing tags.

Here's a jsfiddle with my code which is taken from the examples. In the example, you can create new tags which are what I want to limit. The user should be able to select tags only from the list that's retrieved from GitHub via ajax.

Does anybody know how to disable this functionality?

Solution 1

This should work - in the initialization of select2, try returning undefined from the createTag function like so:

createTag: function(params) {
                return undefined;
           }

Solution 2

I've been struggling with this as well, but got it working after a few hours.

I had specified a few token seperators (because my visitors are allowed to create tags in a different spot in the website). Turns out the seperators are still applied even if the tags configuration is set to false.

Solution: tags: false and do NOT add a value for tokenSeperators. Keep multiple: true.

Solution 3

You can disable tags by removing tags: true when initializing Select2. Or alternatively, setting tags: false when initializing Select2. Tags are only enabled if the tags option is truthy, which it is when you are passing in true.

Solution 4

I am not sure if I should add the following in here but as I was searching for the same issue google pointed me to this question. However I use an older version 3.x and this is how to achieve the same scenario for the 3.x versions.

Tested on version 3.5

createSearchChoice: function(params) {
    return undefined;
}

View more solutions

Comments

[tftd]

I'm looking for the following visual effect. If I set tags: false (or just omit it), it will go back to a select box. In my case I need it to work more like tag-it rather than a select box.

[Kevin Brown-Silva]

I'm not entirely sure what you mean, and unfortunately without a jsfiddle/jsbin to look at (what you have right now vs what you want), it's difficult to answer anything past the question in your title. I'm not sure what you mean by "go back to a select box". Are you looking for the multiple option, by chance?

[tftd]

I probably didn't explain it well enough - sorry about that. What I meant is that if I remove tags: false it will become a selectbox like the Loading remote data example. I've updated my question. Hope this makes more sense?

[JasonDavis]

I think he is saying he want for users to have to select an existing tag value and not be able to type in there own custom new tag value. I am after the same functionality myself. Stackoverflow for example will not let users with low scores create new tags

[tftd]

Sorry for the late response. This seems to be working fine for me. Thank you for sharing! :)

[Neha Choudhary]

@tftd can you update the fiddle using this solution, as I tried updating the fiddle you sent but its not working in that.

[David R Tribble]

Apparently this used to be called createSearchChoice() in pre-4.0 (3.5.3) Select2. They changed many function names when they moved to 4.0.

[Rafael]

I wonder... why do that when their own documentation points to tags: false? select2.org/tagging