13

如何修改 tag-it ui 插件https://github.com/aehlke/tag-it (version v2.0) 所以它只允许选择 x 个标签以及如何只允许“availableTags”中的标签-选项”？

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

4

6 回答 6

14

首先像这样将自定义选项（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 时使用这些选项。只允许使用最多 3 个标签的 sampleTags

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

            })

        });
于 2011-09-21T13:00:51.907 回答
7

您只需将此参数提供给 .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-02-25T17:12:19.580 回答
3

2013 年 3 月 13 日更新：

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

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

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

var 返回用户 = [];

然后：

    $("#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 来限制框中允许的标签数量很简单。不确定这是否是获得计数的最佳方法，但它绝对有效。

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

于 2013-03-12T22:36:16.197 回答
2

jQuery UI 标记它！@版本 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 以限制标签的数量。

于 2015-12-14T09:52:13.543 回答
1

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

removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : 5, -
于 2016-06-19T19:42:24.733 回答
0

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

  1. 将检查放入 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,

        })

    });
于 2014-01-21T07:28:25.883 回答