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

Question

如何修改 tag-it ui 插件https://github.com/aehlke/tag-it（版本 v2.0），使其只允许选择 x 个标签，以及如何只允许“availableTags-option”中的标签？

这个问题（或它的第一部分）在过去已经被问过和回答，但对于以前版本的插件。

Answer 1

首先像这样将自定义选项（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,

            })

        });

Answer 2

您只需将此参数提供给 .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;
});

Answer 3

2013 年 3 月 13 日更新：

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

所以这里是如何在不修改插件的情况下完成这两件事:)

首先，如果有更好的方法可以做到这一点，你必须有某种全局数组来放置东西，lmk，否则：

var returnedUsers = [];

然后：

    $("#ccList").tagit({
    autocomplete: {
        source: function( request, response ) {
            $.ajax({
                url: "http://[your server]/user_lookup",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function( data ) {
                    returnedUsers = data;
                    response( $.map( data, function( item ) {
                        return {
                            label: item,
                            value: item
                        }
                    }));
                },
                error: function(xhr, status, error) {
                    returnedUsers = [];
                }
            });
        }
    },
    beforeTagAdded: function(event, ui) {
        if ($.inArray(ui.tagLabel, returnedUsers)==-1)
            return false;
        if ($(".tagit-choice").length >= 5)
            return false;
    }
});

所以基本上你必须将 autocomplete.source 指向一个函数，你可以在其中处理所有 ajax 内容并构建你自己的列表。请注意，这样做可以让您从 cgi 后端返回的内容具有一定的灵活性（即，它不是 具有 是一个字符串数组，它可以是一个哈希数组，您可以解析和构建到自定义列表中）。另请注意，如果我能找到一种方法来访问来自“beforeTagAdded”事件中更基本的自动完成功能的返回值列表，则不需要这样做——杰克暗示的事情是可能的，但没有详细说明。

一旦您构建了要显示的数组，您就可以使用 response() 函数返回它。同时，现在您在“returnedUsers”中拥有该列表的副本，您可以在“beforeTagAdded”函数中使用它。此外，通过仅计算已经存在的标签数量并在 >= 到该数字时返回 false 来限制框中允许的标签数量很简单。不确定这是否是获得计数的最佳方法，但它确实有效。

我知道这已经过时了，我相信任何专家都会找到一百万种比我做得更好的方法，但我还没有找到比我更好地解决这个问题的人在没有实际更改插件的情况下进行概述，我不喜欢这样做。 HTH！

Answer 4

jQuery UI 标记它！ @version v2.0 (06/2011)。

转到文件 tag-it.js

并找到函数createTag

以及开头的代码。

    if (that.options.maxTags) {
      if ($('.tagit li').length > that.options.maxTags) {
        alert('Maxmium ' + that.options.maxTags + ' tags are allowed')
        return false;
       }
    }

在页面中

$("#myTags").tagit({
  maxTags: 8
});

这会将标签限制为 8 个标签。您可以将数字更改为 any 以限制标签的数量。

Answer 5

在 tag-it.js 中找到 tagLimit 并设置您要限制的数量。 我限制为 5。默认值为null。

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

Answer 6

我使用新的更新库改进了@kaspers 答案。 在库中进行一些更改 1.在选项中添加新选项 onlyAvailableTags : 假，

1. 把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,

        })

    });