Select2 限制标签数量

Select2 limit number of tags(Select2 限制标签数量)
本文介绍了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!

这篇关于Select2 限制标签数量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)