Select2 limit количество тегов

Есть ли способ ограничить количество тегов, которые пользователь может добавить в поле ввода, используя 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, и обратный вызов для срабатывания при достижении предела.

Ответ 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
    });
});

Edit

Заменено maximumSelectionSize обновленным maximumSelectionLength. Спасибо @DrewKennedy!

Ответ 2

В принятом ответе не упоминается, что оператор maximumSelectionLength должен находиться внутри функции document.ready. Поэтому для тех, у кого такая же проблема, я сделал, вот код, который работал у меня.

 $(document).ready(function() {

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

        });

Ответ 3

$("#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 ключевых слов.

Ответ 4

Это работает для меня.

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

Ответ 5

Это не работает для меня, я получаю query function not defined for Select2, так что вот еще одно обходное решение.

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

Этот параметр можно определить как функцию, и он вызывает каждый раз, когда вы начинаете что-то искать.

Важно то, что у вас есть что-то определенное вне этого select2, чтобы вы могли проверить его (получить к нему доступ). В этом случае вы могли бы где-нибудь в вашей программе изменить значение onlyOne, и, конечно, этот возвращаемый предел также может быть динамическим.

Ответ 6

это работает для меня.

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