Added value/label function.

[betsyecastro]

Since tag-it originally supports only label function, when autocomplete source is a value/label pairs object, the input would take the value as the label. Now, there's a new attribute data on the li.tagit-new selector called item_value, which takes element's value ui.item.id.

Whether singleField is true or not, the hidden input containing the value stores a concatenated string "value:label". If singleField is true, the strings "value:label" of each tag will be separated by singleFieldDelimiter.

[connect-technologies]

hi, this is a wonderful update.

Is it able to add new tags by $("#myTags").tagit("createTag", { label:"foo", value: "bar" });

Any ideas? thanks

[betsyecastro]

Hello. Sure, that would be something like this:

$('#myTags').tagit('createTag', 'foo', 'bar');

Hope it helps ;)

[asfshop]

hi To enter the new tag by "afterTagAdded" and get the value from the return function, please help me I think a small change should be given in the following function : createTag: function(value, tagLabel, additionalClass, duringInitialization) {

        var that = this;

        value = $.trim(value);

        if(this.options.preprocessTag) {
            value = this.options.preprocessTag(value);
        }

        if (value === '') {
            return false;
        }

        if (!this.options.allowDuplicates && !this._isNew(value)) {
            var existingTag = this._findTagByValue(value);
            if (this._trigger('onTagExists', null, {
                existingTag: existingTag,
                duringInitialization: duringInitialization
            }) !== false) {
                if (this._effectExists('highlight')) {
                    existingTag.effect('highlight');
                }
            }
            return false;
        }

        if (this.options.tagLimit && this._tags().length >= this.options.tagLimit) {
            this._trigger('onTagLimitExceeded', null, {duringInitialization: duringInitialization});
            return false;
        }

        var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(tagLabel);

        // Create tag.
        var tag = $('<li></li>')
            .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
            .addClass(additionalClass)
            .append(label);

        if (this.options.readOnly){
            tag.addClass('tagit-choice-read-only');
        } else {
            tag.addClass('tagit-choice-editable');
            // Button for removing the tag.
            var removeTagIcon = $('<span></span>')
                .addClass('ui-icon ui-icon-close');
            var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
                .addClass('tagit-close')
                .append(removeTagIcon)
                .click(function(e) {
                    // Removes a tag when the little 'x' is clicked.
                    that.removeTag(tag);
                });
            tag.append(removeTag);
        }

        // Unless options.singleField is set, each tag has a hidden input field inline.
        if (!this.options.singleField) {
            var escapedValue = label.html();
            var val_lbl = $.trim(value) + ':' + tagLabel;
            tag.append('<input type="hidden" data-item_value="" value="' + val_lbl + '" name="' + this.options.fieldName + '" class="tagit-hidden-field" />');
        }

        if (this._trigger('beforeTagAdded', null, {
            tag: tag,
            tagLabel: this.tagLabel(tag),
            duringInitialization: duringInitialization
        }) === false) {
            return;
        }

        if (this.options.singleField) {
            var tags = this.assignedTags();
            var val_lbl = $.trim(value) + ':' + tagLabel;
            tags.push(val_lbl);
            this._updateSingleTagsField(tags);
        }

        // DEPRECATED.
        this._trigger('onTagAdded', null, tag);

        this.tagInput.val('');

        // Insert tag.
        this.tagInput.parent().before(tag);

        this._trigger('afterTagAdded', null, {
            tag: tag,
            tagLabel: this.tagLabel(tag),
            duringInitialization: duringInitialization
        });

        if (this.options.showAutocompleteOnFocus && !duringInitialization) {
            setTimeout(function () { that._showAutocomplete(); }, 0);
        }
    }

tanks