限制显示的选择 tom-select

Question

I am using the javascript lib Tom-Select . I would like to limit the display of how many items have been selected. I do not want to limit the number of actual choices - only how many are displayed. Standard functionality shows all selections in a growing box. I would like to set a limit of 3 . Then if a user selects more than 3 the box will no longer grow but simply say 4 items selected (or 5, 6, etc). Bonus points if I could limit selections by the element width instead of a count (forcing the element to always remain on one line of the form).

Answer 1

You could trick using the render method and the items.length array, but how will you then let your users delete their own choices as you don't display the selected items?

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