n items selected rather than list of items

[itergator]

This is a great library that will help me remove jquery from a project entirely. I am using bootstrap-select at the moment in the project as it is currently bootstrap 4.

In bootstrap select there is an option to use a count variable so that in a multiple select rather than the list of items, the line "n items selected" is rendered.

As the select options are fairly long this is a great alternative to have. I have tried implemented this is the plugin system, and have had varied success using the render options to render a single item.

From my understanding what is needed is the ability the render the whole list, not just a single item. This way, a simple length can be performed to get the n value and render "n items selected".

This is probably much simpler than I am thinking too!

Edit: For my purposes this needs to be a dropdown style (with a readonly title), that is multiselect. For example, when the number of items selected is = 1 the title would be that value. When > 1 the readonly title would display "n items selected"

[WilliamStam]

just found this discussion now as well since its something ive now come up against.

doesnt seem to be a way to not have the select box grow and push all layouts out of wack currently. (i tried with css but no go).

tom-select uses "templates" for rendering. but it uses an items template to show each item in the selected options list. so my first thought was just to make those an empty span. but then no way to show the count right? so it would probably need a template specificaly for that.

my suggestion @ the devs: remove the "item" render and turn it to "selected". pass a list of items to it as the first argument.

if you keep the item render then just make the selected option's default pretty much just items.map item type thing. (this would keep backwards compatability)

the idea is then in the callback function we can then add in something like

function(items,escape){ 
    return `You have selected ${items.length} items`;
}

and voila.

[itergator]

I ended up writing a custom component with a bootstrap 5 dropdown.

Using this I could change the dropdown button text as well as add/remove markers to the dropdown list.

I would then use a hidden form input to add the values from the dropdown to the form / POST request.

I can't give the code, but that is generally how I solved it.

[oyejorge]

Here's a start

[Huluti]

Would be very interested in this feature. It's better for select limited in size and with long option names :)

[jnovak-SM2Dev]

This really should be added. Most other select libraries for react etc already have this. Kind of a no brainer.

[jnovak-SM2Dev]

I took @oyejorge's example and adjusted it a bit. Probably not the best way to handle it, but it works. It shows the name of the option if only one is selected. If more than one is selected then it shows n number of items.

https://codepen.io/Josh-Novak-the-bold/pen/vYQPmRB?editors=1011

[quinceleaf]

This is great, was just experimenting how to create this myself, for a report builder UI where the checkbox-able choices range from small lists to very long (which doesn't then play well as multi-selected chips). Thanks!

[ksouthworth]

This is wonderful, just what I was looking for and nicely coded btw!

Would love to see this merged as an official plugin

I took @oyejorge's example and adjusted it a bit. Probably not the best way to handle it, but it works. It shows the name of the option if only one is selected. If more than one is selected then it shows n number of items.

https://codepen.io/Josh-Novak-the-bold/pen/vYQPmRB?editors=1011

[Marcelogiovane]

in css

.more::after {
background: gray;
border-radius: 50%;
color: white;
content: attr(data-more);
margin-left: 0.5rem;
padding: 3px;
}

in js

function itemmore(cb) {
if(cb.items.length > 0) {
let items = cb.control.querySelectorAll('.item');
items[0].classList.remove('more');
items[0].removeAttribute('data-more');
items[0].style.display = '';
if(cb.settings.more && cb.items.length > 1) {
items[0].classList.add('more');
items[0].setAttribute('data-more','+' + (items.length -1));
for(i = 1; i < items.length; i++) {
items[i].classList.remove('more');
items[i].removeAttribute('data-more');
items[i].style.display = 'none';
}
}
}
}

new TomSelect('#obj',{
more: true,
plugins: ["checkbox_options",'dropdown_input',"no_backspace_delete"],
onChange: function() {itemmore(this)},
onInitialize: function() {itemmore(this)},
})