Select2限制标签数量

Question

有没有办法限制用户可以使用Select2添加到输入字段的标签数量？

我有:

$('#tags').select2({
    containerCssClass: 'supplierTags',
    placeholder: "Usual suppliers...",
    minimumInputLength: 2,
    multiple: true,
    tokenSeparators: [",", " "],
    placeholder: 'Usual suppliers...',
            createSearchChoice: function(term, data) {
                if ($(data).filter(function() {
                    return this.name.localeCompare(term) === 0;
                }).length === 0) {
                    return {id: 0, name: term};
                }

            },
    id: function(e) {
        return e.id + ":" + e.name;
    },
    ajax: {
        url: ROOT + 'Call',
        dataType: 'json',
        type: 'POST',
        data: function(term, page) {
            return {
                call: 'Helpers->tagsHelper',
                q: term
            };
        },
        results: function(data, page) {
            return {
                results: data.tags
            };
        }
    },
    formatResult: formatResult,
    formatSelection: formatSelection,
    initSelection: function(element, callback) {
        var data = [];
        $(element.val().split(",")).each(function(i) {
            var item = this.split(':');
            data.push({
                id: item[0],
                name: item[1]
            });
        });
        callback(data);
    }
});

如果可能存在/是一个简单的参数,limit: 5并且当达到限制时会触发回调,那将会很棒.

Answer 1

当然,maximumSelectionLength像这样:

$("#tags").select2({
    maximumSelectionLength: 3
});

最大选择长度

Select2允许开发人员限制可在多选控件中选择的项目数.

http://ivaynberg.github.io/select2/

它没有本机回调,但你可以传递一个这样的函数formatSelectionTooBig:

$(function () {
    $("#tags").select2({
        maximumSelectionLength: 3,
        formatSelectionTooBig: function (limit) {

            // Callback

            return 'Too many selected items';
        }
    });
});

http://jsfiddle.net/U98V7/

或者你可以formatSelectionTooBig像这样扩展:

$(function () {
    $.extend($.fn.select2.defaults, {
        formatSelectionTooBig: function (limit) {

            // Callback

            return 'Too many selected items';
        }
    });

    $("#tags").select2({
        maximumSelectionLength: 3
    });
});

编辑

替换maximumSelectionSize为更新的maximumSelectionLength.谢谢@DrewKennedy!

Answer 2

方法1

$("#tags").select2({
    maximumSelectionLength: 3
});

方法2

<select data-maximum-selection-length="3" ></select>

所有可用选项的列表https://select2.org/configuration/options-api