CODEWITHSUNDEEP
twitter-bootstrapbootstrap-tags-input
TIGER
TIGER

Reputation: 2907

How to allow comma in bootstrap tags input filter?

I am using below code to submit tags using bootstrap tags input filter, I want to allow comma in tags. Please help.

$('.tagsinput').tagsinput({
        maxTags: 15,
        trimValue: true,
        confirmKeys: [13],
        allowDuplicates: false,
        onTagExists: function(item, $tag) {
            alert('Tag already exists')
            $tag.hide.fadeIn();
          }
    });

Upvotes: 9

Views: 11863

Answers (2)

redbmk
redbmk

Reputation: 4796

Edit

Since the time of the original writing it looks like two options now exist for this: delimiter and delimiterRegex. So you should be able to do .tagsinput({ delimiter: '|' }) or .tagsinput({ delimiterRegex: /\s+/ }). The default is still ,.

Original post

There is no option for that, so you'd have to change the code for the plugin. Line 87 of bootstrap-tagsinput.js splits on the , character. You could change that to be a different character, like ; or |. If you wanted to make it more extensible you could add splitOn: ',' to defaultOptions, then and change line 87 to be var items = item.split(self.options.splitOn);. You can add self.options.splitOn && to the if statement above too, which will keep it from trying to split when there's nothing to split on.

So, the code changes will need to look like this: 

// Line 4
var defaultOptions = {
    splitOn: ','
    // ...
};

// Line 86
if (self.options.splitOn && typeof item === "string" && this.$element[0].tagName === 'INPUT') {
  var items = item.split(self.options.splitOn);
  // ...
}

You'll want to keep using confirmKeys: [ 13 ], and you'll probably want to use a <select multiple></select> instead of an <input /> so that you get an array instead of a comma separated string when you do $(".tagsinput").val();

Here's an example.

Upvotes: 11

Stephen Thomas
Stephen Thomas

Reputation: 14053

Add your tags as objects instead of strings, e.g.:

el.tagsinput({
  itemValue: 'value',
  itemText: 'text',
  maxTags: 15,
  trimValue: false,
  //...
});

el.tagsinput('add', { "value": 1 , "text": "Tag 1," });
el.tagsinput('add', { "value": 2 , "text": "Tag 2," });
//...

Upvotes: 0

Related Questions