如何修改jquery tag-it插件：限制标签数量,只允许可用的标签

如何修改标签 – 它的ui插件 https://github.com/aehlke/tag-it(版本v2.0),所以它只允许选择x数量的标签和如何只允许在“availableTags选项”中的标签？

这个问题(或其第一部分)在过去已经被问及了,但是对于以前版本的插件.

解决方法

首先添加自定义选项(maxTags和onlyAvailableTag)到插件文件像这样…

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
        }

接下来用这个替换_isNew函数…

_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;
        }

现在,您可以在初始化tagit时使用这些选项.只允许使用sampleTag,最多可以包含3个标签

$(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,})

        });