限制显示的选择 tom-select

【问题标题】：limit displayed selections tom-select限制显示的选择 tom-select
【发布时间】：2022-09-29 19:04:31
【问题描述】：

我正在使用 javascript 库 Tom-Select。我想限制展示选择了多少项目。我不要想要限制实际选择的数量 - 只显示多少。标准功能在一个不断增长的框中显示所有选择。我想设置3 的限制。那么如果用户选择超过 3 个盒子将不再增长，而只是说4 items selected（或5、6等）。如果我可以通过元素宽度而不是计数来限制选择（强制元素始终保留在表单的一行上），则可以加分。

标签： javascript tom-select

【解决方案1】：

您可以使用 render 方法和items.length数组，但是当您不显示所选项目时，您将如何让您的用户删除他们自己的选择？

render: {
            option: function (data, escape) {
                return '<div class="d-flex"><span>' + escape(data.text) + '</span></div>';
            },
            item: function (data, escape) {
                //return '<span class="tag is-info mb-1 mr-1">' + escape(data.text) + '</span>';
                if (this.items.length >= 3){
                    return '<span class="tag is-info mb-1 mr-1" style="display:none">' + escape(data.text) + '</span>';
                }else{
                    return '<span class="tag is-info mb-1 mr-1">' + escape(data.text) + '</span>';
                }
            }
        }

【讨论】：