Multiselect2 начальный поиск отключен

Question

При использовании множественного выбора select2 и ajax / initSelection для источника выбора опция фильтра отключается, а поле select2-search__ отсутствует в html при начальной загрузке.

Поскольку этот селектор не имеетa MinimumInputLength, параметры отображаются, и как только один из них выбран, это поле поиска создается и может использоваться.Если задано минимальное значениеInputLength, то select2 в основном непригоден для использования.

Используется выбивка, поэтому я включил обработчик привязки.

HTML:

...
<select class="form-control"
    data-bind="selectedOptions: matchList,
    select2: {
        initSelection: $parents[1].initSupplier,
        ajax: $parents[1].ajaxSuppliers,
        escapeMarkup: function (markup) { return markup },
        multiple: true,
        maximumSelectionSize: 5,
        placeholder: 'Select Supplier...',
        width: '100%',
        allowClear: true
    }"></select>
...

Viewmodel:

self.initSupplier = function (element, callback) {
    var options = $(element).children();
    if (options.length > 0) {
        var suppliers = [];
        var ajax = options.map(function (opt) {
            if (options[opt]) {
                return $.ajax('api/supplier/' + options[opt].value).done(function (data) {
                    try {
                        suppliers.push({ id: data.identifierGuid, text: data.name });
                    } catch (err) {
                        if (system.debug()) {
                            console.error(err);
                        }
                    }
                });
            }
        });
        $.when.apply($, ajax).then(function () {
            if (suppliers.length > 0) {
                callback(suppliers);
            }
        });
    }
};

self.supplierPageSize = ko.observable(25);
self.ajaxSuppliers = {
    delay: 450,
    url: 'api/suppliers',
    type: 'GET',
    dataType: 'json',
    data: function (params) {
        return {
            skip: self.supplierPageSize() * ((params.page || 1) - 1),
            take: self.supplierPageSize(),
            code: isNaN(params.term) ? null : params.term,
            name: isNaN(params.term) ? params.term : null,
            showAll: true
        };
    },
    processResults: function (data, params) {
        if (data && data.list) {
            data.list = data.list.map(function (supplier) {
                return { id: supplier.identifierGuid || null, text: supplier.name || '' };
            });
        } else {
            data = { list: [] };
        }
        return {
            results: data.list,
            pagination: {
                more: (params.page * self.supplierPageSize()) < data.totalCount
            }
        };
    }
}

Обработчик привязки:

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
        var select2 = ko.unwrap(allBindings.select2);
        if (select2.data) {
            select2.data = ko.unwrap(select2.data);
        }
        if ("selectedOptions" in allBindings && !("options" in allBindings)) {//initalising select2 with selections correctly
            var values = ko.unwrap(allBindings.selectedOptions);
            if (values && values.length > 0) {
                select2.data = values.map(function (opt) { return { id: opt, text: opt }; });
            }
        }
        if (!select2.width) {
            select2.width = '100%';
        }

        select2.formatInputTooShort = select2.formatInputTooShort || function (value, min) {
            return "Please enter " + (min - value.length) + " or more characters";
        };

        $(el).select2(select2);

        if (select2.selecting) {
            $(el).on('select2:selecting', select2.selecting);
        }
        if (select2.removing) {
            $(el).on('select2:unselecting', select2.removing);
        }

        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
            $(el).select2('destroy');
        });

        $(el).trigger('change');
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
        var select2 = ko.unwrap(allBindings.select2);

        if ("value" in allBindings) {
            var value = ko.unwrap(allBindings.value);

            if (ko.unwrap(select2.multiple) && value.constructor !== Array) {
                value = String(value).split(',');
            }

            $(el).select2('val', value);
            $(el).val(value).trigger('change');

        } else if ("selectedOptions" in allBindings) {
            var converted = [];             
            var textAccessor = function (value) { return value; };
            if ("optionsText" in allBindings) {
                textAccessor = function (value) {
                    var valueAccessor = function (item) {
                        return item;
                    };

                    if ("optionsValue" in allBindings) {
                        valueAccessor = function (item) {
                            return item[allBindings.optionsValue];
                        };
                    }

                    var items = $.grep(allBindings.options(), function (e) {
                        return valueAccessor(e) == value;
                    });

                    if (items.length == 0 || items.length > 1) {
                        return "UNKNOWN";
                    }

                    return items[0][allBindings.optionsText];
                }
            }

            $.each(allBindings.selectedOptions(), function (key, value) {
                converted.push({ id: value, text: textAccessor(value) });
            });

            $(el).select2("data", converted);
            $(el).trigger('change');
        }
    }
};

Answer 1

Обходной путь, чтобы сделать эту работу.Это только если вам нужно, чтобы он был пустым при загрузке.Определите данные с идентификатором и текстом ""

<select class="form-control" multiple
    data-bind="selectedOptions: matchList,
    select2: {
        data: [{id: '', text: ''}],
        initSelection: $parents[1].initPriceGroup,
        ajax: $parents[1].ajaxPriceGroups,
        escapeMarkup: function (markup) { return markup },
        multiple: true,
        maximumSelectionSize: 5,
        placeholder: 'Select Price Group...',
        width: '100%',
        allowClear: true
    }"></select>

Тогда инициализатору нужно игнорировать недопустимые идентификаторы и вернуть обратный вызов с пустым списком.

Это заставит select2 поверить, что это былоотмените выбор и добавьте ввод для поиска, чтобы пользователь не видел это и не делал это самостоятельно.

self.initPriceGroup = function (element, callback) {
    var options = $(element).children();
    if (options.length > 0) {
        var groups = [];
        var ajax = options.map(function (opt) {
            if (options[opt] && options[opt].value) {
                return $.ajax('api/priceGroup/' + options[opt].value).done(function (data) {
                    try {
                        groups.push({ id: data.priceGroupGuid, text: data.name });
                    } catch (err) {
                        if (system.debug()) {
                            console.error(err);
                        }
                    }
                });
            }
        });
        $.when.apply($, ajax).then(function () {
            if (groups.length > 0) {
                callback(groups);
            } else {
                callback([]);
            }
        });
    }
};