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，并且在达到限制时触发回调函数，那将是非常好的。

- imperium2335

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
    });
});

编辑

使用更新的 maximumSelectionLength 替换了 maximumSelectionSize。感谢 @DrewKennedy！

- Magnus Engdal

---

谢谢！是否有一种方法可以在达到此限制时触发事件？那就太完美了。 - imperium2335

没有本地回调函数，但我在我的答案中添加了一种可能的解决方案。 - Magnus Engdal

请注意，maximumSelectionSize已被替换为maximumSelectionLength。 - Drew Kennedy

如何在Yii2中使用这个？ - user3770797

注意到在版本说明中，格式化程序被移动到语言选项中 (maximumSelected)。 - alanfcm

即使使用 'tokenSeparators' => [',', ' ']，仍然无法正常工作，它允许选择超过限制的数量。 - Muhammad Omer Aslam

Answer 2

方法1

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

方法2

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

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

- Sarath Ak

Answer 3

被接受的答案没有提到maximumSelectionLength语句应该在document.ready函数内部。因此，对于任何遇到与我相同问题的人，这是对我有效的代码。

 $(document).ready(function() {

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

 });

- Charlie

Answer 4

$("#keywords").select2({
    tags : true,
    width :'100%',
    tokenSeparators: [','],
    maximumSelectionLength: 5,
    matcher : function(term,res){
        return false;
    },
    "language": {
        'noResults': function(){
            return "Type keywords separated by commas";
        }
    }
}).on("change",function(e){
    if($(this).val().length>5){
        $(this).val($(this).val().slice(0,5));
    }
});

尝试像这样。它会缩短到5个关键字。

- Aruna Warnasooriya

Answer 5

这对我没有用，我收到了“Select2未定义查询函数”的错误消息，所以这里有另一个解决方法。

        var onlyOne=false;
         $("selector").select2({
            maximumSelectionSize:function(){
                if(onlyOne==true)
                    return 1;
                else
                    return 5;
            }
         });

这个设置可以定义为函数，并且每次开始搜索时都会被调用。

重要的是，你需要在 select2 闭包外定义一些东西，以便你可以检查它（访问它）。在这种情况下，你可以在程序的某个地方更改 onlyOne 的值，当然，这个返回的限制也可以是动态的。

- Mr Br

---

现在可以将maximumSelectionSize设置为整数以限制选择的数量。 - bJacoG

Answer 6

发送 GET 请求到操作方法，然后将类属性映射到下拉框 ID 和文本属性。

$("#DropDownId").select2({
       minimumInputLength: 3,
       maximumSelectionLength: 10,
    tags: [],
    ajax: {
        url: "@Url.Action("ActionName", "ControllerName")",
        type: "get",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                Title: params.term // search term
            };
        },
        processResults: function (response) {
            return {
                results: $.map(response, function (item) {
                    return {
                        text: item.Title,
                        id: item.Id
                    }
                })
            };
        }
    }
});

动作方法

 [HttpGet]
        public JsonResult ActionName(string Title)
        {
            ClassName obj= new ClassName ();
            obj.Title = "PMPAK";
            obj.Id= -1;
            obj.Add(nibafInstitute);

            return Json(obj, JsonRequestBehavior.AllowGet);
        }

     public class ClassName 
    {
        public int Id{ get; set; }

        public string Title { get; set; }
    }

- Tayyeb

Answer 7

这对我来说是有效的。

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

- Viral M