tag-it inserting data from the clipboard

Question

This is a question regarding tag-it jquery component. Comma field delimiter works fine when I enter the tags via keyboard, but when I paste tags with a comma(for example - one, two, three) from clipboard it looks like a one single tag with a commas inside the tag. Is it possible to configure tag-it in order to recognize different(separated) tags in the scenario described above ?

Hmmm.. the plugin supplies a callback for the `afterTagAdded` event, perhaps you'll be able to detect tags containing the comma character in that callback, then split it by that character and then insert them one by one using the `createTag` method — Lix, Sep 08 '13 at 09:49
Oh! The `preprocessTag` method might also be useful here. Just check if a comma exists in the supplied tag name and then split it and add them one by one. — Lix, Sep 08 '13 at 09:51

Irvin Dominin · Accepted Answer · 2013-09-08T14:06:25.873

You can use the preprocessTag function to check the given tag and eventually split it in some tags and add them to tag it using createTag.

Code:

var $tagInp = $("#tagInp");

$tagInp.tagit({
    allowSpaces: true,
    preprocessTag: function (val) {
        if (!val) {
            return '';
        }
        var values = val.split(",");
        if (values.length > 1) {
            for (var i = 0; i < values.length; i++) {
                $tagInp.tagit("createTag", values[i]);
            }
            return ''
        } else {
            return val
        }
    }
});

Demo: http://jsfiddle.net/IrvinDominin/GL6VK/

EDIT DELIMITER GOT FROM OPTION

You can get the delimiter using:

$tagInp.tagit('option','singleFieldDelimiter')

Code:

var $tagInp = $("#tagInp");

$tagInp.tagit({
    allowSpaces: true,
    preprocessTag: function (val) {
        if (!val) {
            return '';
        }
        var values = val.split($tagInp.tagit('option','singleFieldDelimiter'));
        if (values.length > 1) {
            for (var i = 0; i < values.length; i++) {
                $tagInp.tagit("createTag", values[i]);
            }
            return ''
        } else {
            return val
        }
    }
});

Demo: http://jsfiddle.net/IrvinDominin/GL6VK/2/

thank you very much ! One more question, is it possible to get delimiter's values from the component settings ? — alexanoid, Sep 08 '13 at 13:46

score 2 · Answer 2 · answered Sep 29 '16 at 11:03

You can Edit the tag-it.js library for a permanent solution. try this Add split pattern in options

splitPattern        : ',',

Now, in the keydown event function replace that.createTag(that._cleanedInput()) with

var tags = that._cleanedInput().split(that.options.splitPattern);
                        if (tags.length > 1) {
                            tags.forEach(function(tag) {
                                that.createTag(tag);
                            });
                            event.preventDefault();
                        } else {
                            that.createTag(that._cleanedInput());
                        }

tag-it inserting data from the clipboard

2 Answers2

EDIT DELIMITER GOT FROM OPTION