限制所显示的选择tom select

Question

我使用的是javascript库Tom Select。我想限制显示已选择的项目数。我不想限制实际选择的数量，只想限制显示的数量。标准功能显示增长框中的所有选择。我想设置3的限制。然后，如果用户选择超过3，则框将不再增长，而只是简单地说4 items selected(或5、6等(。如果我可以通过元素宽度而不是计数来限制选择(强制元素始终保持在表单的一行(，则可以获得加分。

Answer 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>';
}
}
}

Answer 2

好吧，我明白了。这就是实现它的方法：

<script>
new TomSelect('#your_id', {
plugins: ['checkbox_options'],
onInitialize: function (){
updateSelectedDisplay(this);
},
onItemAdd: function() {
updateSelectedDisplay(this);
},
onItemRemove: function() {
updateSelectedDisplay(this);
}
});
function updateSelectedDisplay(instance) {
selectedItems = instance.control.querySelectorAll('.item');
var childElement = instance.control.querySelector('#ts-placeholder');
var numSelected = selectedItems.length;
if (numSelected > 1) {
// hide all existing
selectedItems.forEach(function(item){
item.hidden = true
})
if (!childElement){
// add dummy
var divElement = document.createElement('div');
// Set attributes
divElement.setAttribute('id', 'ts-placeholder');
// Set content
divElement.textContent = numSelected + ' items selected';
// Append the div element to the second last position of the desired parent element
instance.control.insertBefore(divElement, instance.control.lastChild);
} else {
var childElement = instance.control.querySelector('#ts-placeholder');
childElement.textContent = numSelected + ' items selected';
}
} else {
selectedItems.forEach(function(item){
item.hidden = false
})
var childElement = instance.control.querySelector('#ts-placeholder');
if (childElement){
instance.control.removeChild(childElement)
}
}
}
</script>

要修改阈值，只需根据您的需要修改if (numSelected > 1)即可。不幸的是，它并没有解决TomSelect调整输入字段大小的行为。这可以通过添加自定义css来解决。