Question

how to modify the tag-it ui plugin https://github.com/aehlke/tag-it (version v2.0) so it only allows selection of x numbers of tags and how to allow only tags that are in the “availableTags-option”?

this question (or the first part of it) is already asked and aswerd in the past but for previous version of the plug-in.

Answer 1

first add custom options (maxTags and onlyAvailableTags) to the plugin file like so…

options: {
            itemName          : 'item',
            fieldName         : 'tags',
            availableTags     : [],
            tagSource         : null,
            removeConfirmation: false,
            caseSensitive     : true,
            maxTags           : 9999,//maximum tags allowed default almost unlimited
            onlyAvailableTags : false,//boolean, allows tags that are in availableTags or not 
            allowSpaces: false,
            animate: true,
            singleField: false,
            singleFieldDelimiter: ',',
            singleFieldNode: null,
            tabIndex: null,
            onTagAdded  : null,
            onTagRemoved: null,
            onTagClicked: null
        }

next replace the _isNew function with this one…

_isNew: function(value) {
            var that = this;
            var isNew = true;
            var count = 0;
            this.tagList.children('.tagit-choice').each(function(i) {
                count++;

                if (that._formatStr(value) == that._formatStr(that.tagLabel(this))|| count >= that.options.maxTags) {
                    isNew = false;
                    return false;
                }
                if (that.options.onlyAvailableTags && $.inArray(that._formatStr(value),that.options.availableTags)==-1) {
                    isNew = false;
                    return false;
                }

            });
            return isNew;
        }

Now you can use the options when you initialize tagit. only the sampleTags are allowed with a maximum of 3 tags

$(function(){
            var sampleTags = ['php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python'];

            //-------------------------------
            // Tag events
            //-------------------------------
            var eventTags = $('#s_tags');
            eventTags.tagit({
                availableTags: sampleTags,
                caseSensitive: false,
                onlyAvailableTags: true,
                maxTags:3,

            })

        });