web-dev-qa-db-fra.com

Select2 limite le nombre de balises

Existe-t-il un moyen de limiter le nombre de balises qu'un utilisateur peut ajouter à un champ de saisie à l'aide de Select2?

J'ai:

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

Ce serait génial s'il pouvait y avoir/est un paramètre simple comme limit: 5 et un rappel à tirer lorsque la limite est atteinte.

javascriptjquerytagsjquery-select2
31
imperium2335

Bien sûr, avec maximumSelectionLength comme ceci:

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

Longueur de sélection maximale

Select2 permet au développeur de limiter le nombre d'éléments pouvant être sélectionnés dans un contrôle à sélection multiple.

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

Il n'a pas de rappel natif, mais vous pouvez passer une fonction à formatSelectionTooBig comme ceci:

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

            // Callback

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

http://jsfiddle.net/U98V7/

Ou vous pouvez étendre formatSelectionTooBig comme ceci:

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

            // Callback

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

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

Modifier

maximumSelectionSize remplacé par le maximumSelectionLength mis à jour. Merci @DrewKennedy!

68
Magnus Engdal

La réponse acceptée ne mentionne pas que l'instruction maximumSelectionLength doit être à l'intérieur de la fonction document.ready. Donc, pour tous ceux qui ont le même problème que moi, voici le code qui a fonctionné pour moi.

 $(document).ready(function() {

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

        });
3
Delta Charlie
$("#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));
    }
});

Essayez comme ça. Il abrégera jusqu'à 5 mots clés.

2
Aruna Warnasooriya

Cela ne fonctionne pas pour moi, je reçois query function not defined for Select2, voici donc une autre solution.

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

Ce paramètre peut être défini comme une fonction et il est appelé chaque fois que vous commencez à rechercher quelque chose.

L'important est que vous ayez quelque chose de défini en dehors de cette fermeture select2 afin que vous puissiez le vérifier (y accéder). Dans ce cas, vous pourriez quelque part dans votre programme changer la valeur de onlyOne et bien sûr cette limite retournée peut également être dynamique.

1
Mr Br

Cela fonctionne pour moi.

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