Tags not working properly with custom DataAdapter


I am using a custom dataAdapter and also trying to use the ‘tags’ attribute in Select2. But the exemple found in the documentation is not working at all, the ‘tags’ attribute is simply ignored (this is only happening when using a custom dataAdapter, otherwise it’s working fine).

So this is not working:

  tags: true

As a solution for this, I’ve found out we can use a decorator for Tags in the dataAdapter, and it really works! Problem is, it will always work. So if I have two ‘select’ tags in HTML, and I want one of them to have ‘tags:true’ and the other one to have ‘tags:false’, they’ll both have tagging enabled because of this decorator. I’ve tried setting ‘tags:false’, but it’s not working.

I’m thinking a solution would be in the dataAdapter, to create an if statement for the decorator, for it to be applied or not. But then the problem is that this specific code is executed only once, when the first ‘select’ is created.

So I’m thinking that if I use a dataAdapter for creating multiple selects, all of them will have the same decorators. And I don’t think having multiple dataAdapters would be a solution for me.

So my question is, if I have multiple ‘select’ elements, how can I use different decorators applied for each of them? Also using the same dataAdapter?

I also have a JSBin for this: Tags with dataAdapter

Any help is appreciated, thanks!

Hello, Evelyne_Todesc!

You can add the following code to your CustomData.prototype.query function:

if(this.options.options.tags === true)
	var tag = params.term && params.term != '' ? params.term : this.$element.val() ? this.$element.val() : "";
	var lowerTag = String(tag).toLowerCase();
	var exists = false;
	if(lowerTag != "")
		data.forEach(function(item) {
			if(item.lowerText == lowerTag) {
				exists = true;
				return false; // break
	if(!exists) {
		data.unshift({id: tag, text: tag, lowerText: lowerTag});

This will dynamically add new tag into your list.