Selected multiple selection becomes huge when multiple / all options are selected

Question

When using Chosen.js in a multiple-choice field, if there are more than 500 options selected by the user, the list is simply ridiculously long.

Can I limit the number of items displayed? For example, if more than three parameters are selected, the user will select (4) ... , instead of listing them.

I wonder why there is no such option in the documentation.

Thanks in advance.

Answer 1

You can use something like this:

$('.element').chosen().change(function() {
    var totalSelected = $(this).find('option:selected').size();
    var placeholder = $(this).find('option:first-child').text();
    if(totalSelected > 3) {
        $(this).next().find('.chosen-choices').find('li.search-choice').hide(),
        $(this).next().find('.chosen-choices').find('.literal-multiple').show();
        $(this).next().find('.chosen-choices').find('span.literal-multiple').text(placeholder + " ("+totalSelected+")");
    }
});

literal-multiple totalSelected. :

selected.jquery.js

Chosen.prototype.set_up_html = function() {
   //stuff
   if(this.is_multiple) {
     var selVal  = this.default_text;
     this.container.html('<ul class="chosen-choices"><span class="literal-multiple"></span></ul>');
   }
};

Answer 2

SOrry , . , , n , <li> .

- -

$('.element').chosen().change(function() {
    var totalSelected = $(this).find('option:selected').size();
    var placeholder = $(this).find('option:first-child').text();
    if(totalSelected > 3) {
       $(this).next().find('.chosen-choices').find('li.search-choice').hide(),
       $(this).next().find('.chosen-choices')append('<li class="search-choice" <span>'+totalSelected+' users selected. </li>');
}
});

, .