Select2 限制标签数量 [英] Select2 limit number of tags

问题描述

有没有办法限制用户可以使用 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!

这篇关于Select2 限制标签数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！