Select2 限制标签数量

2022-01-18 00:00:00 tags jquery javascript jquery-select2

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

我有:

$('#tags').select2({containerCssClass: 'supplierTags',placeholder: "通常的供应商...",最小输入长度:2,多个:真,标记分隔符:[",", " "],placeholder: '通常的供应商...',createSearchChoice:函数(术语,数据){if ($(data).filter(function() {返回 this.name.localeCompare(term) === 0;}).length === 0) {返回{id:0,名称:术语};}},id:函数(e){返回 e.id + ":" + e.name;},阿贾克斯:{url: ROOT + '调用',数据类型:'json',类型:'POST',数据:功能(术语,页面){返回 {call: 'Helpers->tagsHelper',问:术语};},结果:函数(数据,页面){返回 {结果:data.tags};}},格式结果:格式结果,格式选择:格式选择,初始化选择:函数(元素,回调){变量数据 = [];$(element.val().split(",")).each(function(i) {var item = this.split(':');数据.push({id:项目[0],名称:项目[1]});});回调(数据);}});

如果可以有一个像 limit: 5 这样的简单参数以及达到限制时触发的回调,那就太好了.

解决方案

当然,maximumSelectionLength 像这样:

$("#tags").select2({最大选择长度:3});

<块引用>

最大选择长度

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

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

它没有原生回调,但你可以像这样向 formatSelectionTooBig 传递一个函数:

$(function () {$("#tags").select2({最大选择长度:3,formatSelectionTooBig:函数(限制){//打回来return '选择的项目太多';}});});

http://jsfiddle.net/U98V7/

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

$(function () {$.extend($.fn.select2.defaults, {formatSelectionTooBig:函数(限制){//打回来return '选择的项目太多';}});$("#tags").select2({最大选择长度:3});});

编辑

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

Is there a way to limit the number of tags a user can add to an input field using Select2?

I have:

$('#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);
    }
});

It would be great if there could be/is a simple parameter like limit: 5 and a callback to fire when the limit is reached.

解决方案

Sure, with maximumSelectionLength like so:

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

Maximum Selection Length

Select2 allows the developer to limit the number of items that can be selected in a multi-select control.

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

It has no native callback, but you can pass a function to formatSelectionTooBig like this:

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

            // Callback

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

http://jsfiddle.net/U98V7/

Or you could extend formatSelectionTooBig like this:

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

            // Callback

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

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

Edit

Replaced maximumSelectionSize with the updated maximumSelectionLength. Thanks @DrewKennedy!

相关文章