Question

如何修改标签-u ui plugin https://github.com/aehlke/tag-it（版本v2.0），因此它只允许选择x个标签以及如何只允许“availableTags-option”中的标签？ / p>

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

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时使用这些选项。只允许使用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,

            })

        });

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-03-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'功能中使用该副本。此外，通过计算已经存在的标签数量来限制框中允许的标签数量很简单，如果它是＆gt; =那么返回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个标签。您可以将数字更改为任意数量以限制大量标签。

Answer 5

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

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

Answer 6

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

检查

的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,

        })

    });

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

6 个答案: