Выбор всех отобранных элементов по клику в chosen (JS)

Question

Можно ли сделать так, чтобы при нажатии на кнопку All (она появляется при клике на select) выбирались все элементы из списка, которые были найдены поиском?

Хотелось бы сделать следующее: я ввожу слово "Болт", и у меня отображается список всех найденных болтов, и по клику на All выбирались бы только найденные болты. Потом я ввожу слово "ключ", и, соответственно, к болтам бы ещё добавлялись и ключи.

Т. е. сейчас выбираются абсолютно все элементы в select: и боксы, и ключи, и болты:

$(".js-selectize").chosen();
$(".multi-choosen-select").on("chosen:showing_dropdown", function(evnt, params) {
    var chosen = params.chosen,
    $dropdown = $(chosen.dropdown),
    $field = $(chosen.form_field);
    if( !chosen.__customButtonsInitilized ) {
        chosen.__customButtonsInitilized = true;
        var contained = function( el ) {
            var container = document.createElement("div");
            container.appendChild(el);
            return container;
        }
        var width = $dropdown.width();
        var opts = chosen.options || {},
        showBtnsTresshold = opts.disable_select_all_none_buttons_tresshold || 0;
        optionsCount = $field.children().length,
        selectAllText = opts.select_all_text || 'All',
        selectNoneText = opts.uncheck_all_text || 'None';
        if( chosen.is_multiple && optionsCount >= showBtnsTresshold ) {
            var selectAllEl = document.createElement("a"),
            selectAllElContainer = contained(selectAllEl),
            selectNoneEl = document.createElement("a"),
            selectNoneElContainer = contained(selectNoneEl);
            selectAllEl.appendChild( document.createTextNode( selectAllText ) );
            selectNoneEl.appendChild( document.createTextNode( selectNoneText ) );
            $dropdown.prepend("<div class='ui-chosen-spcialbuttons-foot' style='clear:both;border-bottom: 1px solid black;'></div>");
            $dropdown.prepend(selectNoneElContainer);
            $dropdown.prepend(selectAllElContainer);
            var $selectAllEl = $(selectAllEl),
            $selectAllElContainer = $(selectAllElContainer),
            $selectNoneEl = $(selectNoneEl),
            $selectNoneElContainer = $(selectNoneElContainer);
            var reservedSpacePerComp = (width - 25) / 2;
            $selectNoneElContainer.addClass("ui-chosen-selectNoneBtnContainer")
                .css("float", "right").css("padding", "5px 8px 5px 0px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllElContainer.addClass("ui-chosen-selectAllBtnContainer")
                .css("float", "left").css("padding", "5px 5px 5px 7px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', true);
                $field.trigger('chosen:updated');
                return false;
            });
            $selectNoneEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', false);
                $field.trigger('chosen:updated');
                return false;
            });
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/chosen.min.css
" rel="stylesheet">
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/chosen.jquery.min.js
"></script>

<select class="js-selectize multi-choosen-select demo-default" multiple style="width:400px;" name="products[]">
    <option value="1">Бокс 1</option>
    <option value="2">Бокс 2</option>
    <option value="3">Бокс 3</option>
    <option value="4">Ключи 1</option>
    <option value="5">Ключи 2</option>
    <option value="6">Ключи 3</option>
    <option value="71">Ключи 4</option>
    <option value="18">Болты 1</option>
    <option value="8">Болты 2</option>
    <option value="9">Болты 3</option>
    <option value="10">Болты 4</option>
</select>

БЛОГ НА HUSL

Выбор всех отобранных элементов по клику в chosen (JS)

Ответы (0 шт):