如何修改jquery标签插件：限制标签数量，只允许可用标签

如何修改tag it ui插件（v2.0版），使其仅允许选择x个标记，以及如何仅允许“availableTags”选项中的标记

这个问题（或它的第一部分）在过去已经被问过了，但是对于插件的早期版本。

首先向插件文件添加自定义选项（maxTags和onlyAvailableTags），就像这样

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时使用这些选项。仅允许sampleTags最多有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,

            })

        });

---

您只需将此参数提供给.tagit:

beforeTagAdded: function(event, ui) {
  if($.inArray(ui.tagLabel, availableTags)==-1) return false;
}

其中availableTags是您的自动完成数组

---

关于下面的@snuggles查询，我相信（尽管我对json协议的熟悉程度有限），您可能可以这样做：

//define autocomplete source
var returnedUsers, jsonUrl = "http://[your server]/user_lookup";
$.getJSON(jsonUrl,function(json){
        returnedUsers = json; // or whatever handler you need to use               
}); 

// instantiate tagit

$("#ccList").tagit({
     availableTags: returnedUsers,
     beforeTagAdded: function(event, ui) { 
     // only allow existing values
     if($.inArray(ui.tagLabel, returnedUsers)==-1) return false;
     // limit length
     if ($(".tagit-choice").length >= 5) return false;
});

更新2013-03-13：

首先，重新阅读OP，我现在不清楚我是否真的在回答这个问题，因为他们特别问如何修改tag it插件以完成这两个调整。如果OP真的想修改插件，那没关系，但正如我之前所说的，你必须修改插件，而你却不这样做，这似乎是站不住脚的

下面是如何在不修改插件的情况下完成这两件事：）

首先，如果有更好的方法，lmk，你必须有某种全局数组来放入内容，但除此之外：

var returnedUsers=[]

然后：

因此，基本上，您必须将autocomplete.source指向一个函数，在该函数中，您可以处理所有ajax内容并构建自己的列表。请注意，这样做允许您在从cgi后端返回的内容中具有一定的灵活性（即，它不必是字符串数组，它可以是您解析并构建到自定义列表中的哈希数组）。还要注意的是，如果我能找到一种方法访问“beforeTagAdded”事件中更基本的autocomplete函数的返回值列表，那么就不需要这样做了——Jack暗示了这一点，但没有详细说明

构建要显示的内容数组后，使用response（）函数返回该数组。同时，现在您在“returnedUsers”中有了该列表的副本，您可以在“beforeTagAdded”函数中使用该列表。此外，通过计算框中已有的标记数并返回false（如果大于等于该数字）来限制框中允许的标记数也很简单。不确定这是否是获得计数的最佳方法，但它确实有效

---

我知道这很古老，我相信任何一位专家都会找到比我更好的方法来解决这个问题，但我还没有发现任何人能比我所概述的更好地解决这个问题，而不改变插件，我不喜欢这样做。嗯

我用新的更新库改进了@kaspers答案。 在图书馆里做些改变 1.在选项中添加新选项 onlyAvailableTags:false

将check放入的createTag方法中

 if (this.options.onlyAvailableTags &&$.inArray(this._formatStr(value),this.options.autocomplete.source)==-1)
{
 return false;
}

那就这样叫塔吉特。现在，TagIt库支持tagsLimit。所以我们不需要定制它

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

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

        })

    });

jqueryui标记它！ @v2.0版（2011年6月）。

转到文件tag-it.js

并找到函数createTag

并在开始时执行以下代码

if（that.options.maxTags）{
if（$（'.tagit li'）.length>that.options.maxTags）{
警报（'Maxmium'+that.options.maxTags+'允许标记'）
返回false；
}
}

在tag it.js中查找

tagLimit

，并设置要限制的数字。 我限制了5个。默认值为

null

removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : 5, -

---

如果你想引起杰克的注意，请在他的答案上留下一条评论，以

@Jack

开头。谢谢Aaron，不幸的是，我的排名太低了，我无法对其他人的答案发表评论：（.不过，我真的认为我有一个比我在上面发布的更好的解决问题的解决方案（并回答了OPs问题）。当我确定它能工作时，我会发布它。我仍然很想知道Jack是否有更多的细节。但是，如果我把代码放在这里会有点尴尬，我会添加到我的回答中。这也会工作，但我更喜欢编辑插件的几行，然后为每个taggit实例手动添加一个全局变量。不知怎的，这个解决方案仍然允许我的first标记不包含在可用标记中。不幸的是，这仅在使用availableTags选项时有效。如果覆盖autocomplete.source，则它不起作用。@user695652如果将检查移动到

createTag

函数而不是

。\u isNew

tagLimit设置现在阻止附加标记，则它似乎起作用。我只能通过将数组源更改为

this.options.availableTags

removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : 5, -