select2 4.0 параметры видны, но не выбираются

Question

Недавно я обновил select2 3.5.1 до select2 4.0.

Ниже вы найдете фрагмент кода.

var self = this, 
    $view = $(view); 
$.fn.select2.amd.require(['select2/data/array', 'select2/utils'], function (ArrayData, Utils) { 
    function CustomData($element, options) { 
     CustomData.__super__.constructor.call(this, $element, options); 
    } 

    Utils.Extend(CustomData, ArrayData); 

    CustomData.prototype.query = function (params, callback) { 
     callback({ 
      results: [{ 
       id: 1, 
       text: "Friesd" 
      }, { 
       id: 2, 
       text: "Ham" 
      }, { 
       id: 3, 
       text: "Eggs Benedict" 
      }] 
     }); 
    } 

    $view.select2({ 
     // templateSelection: ko.unwrap(self.formatFunc), 
     // templateResult: ko.unwrap(self.formatFunc), 
     placeholderOption: 'first', 
     allowClear: false, 
     multiple: "multiple", 
     placeholder: 'search..', 
     escapeMarkup: function (markup) { 
      return markup; 
     }, 
     minimumInputLength: 1, 
     dropdownParent: $('.container')), 
    dataAdapter: CustomData, 
    //id: ko.unwrap(self.idFunc) 
    }); 

Он успешно отображает результаты, но параметры не доступны. Я действительно подозреваю, что это может быть проблема css. Пожалуйста, помогите мне дать обходное решение.

Спасибо в продвинутом состоянии.

Answer 1

Если вы используете Knockout, как ваши метки предполагают, ваша настройка должна выполняться в пользовательской привязки обработчика как так (это особенно для ваших выбора нескольких потребностей):

ko.bindingHandlers.select2 = { 
 
    init: function(element, valueAccessor, allBindingsAccessor, data, context) { 
 
    ko.bindingHandlers.options.init(element, valueAccessor, allBindingsAccessor, data, context); 
 
    $(element).select2({ 
 
     // templateSelection: ko.unwrap(self.formatFunc), 
 
     // templateResult: ko.unwrap(self.formatFunc), 
 
     placeholderOption: 'first', 
 
     allowClear: false, 
 
     multiple: "multiple", 
 
     placeholder: 'search..', 
 
     escapeMarkup: function(markup) { 
 
     return markup; 
 
     }, 
 
     minimumInputLength: 1 
 
     //id: ko.unwrap(self.idFunc) 
 
    }); 
 
    }, 
 
    update: function(element, valueAccessor, allBindingsAccessor, data, context) { 
 
    ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, data, context); 
 
    } 
 
}; 
 

 
ko.applyBindings({ 
 
    fruit: ['apple', 'orange', 'banana', 'tomato'], 
 
    myFruit: ko.observableArray() 
 
});

select { 
 
    min-width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<select data-bind="select2:true, options:fruit, optionsCaption:'pick a fruit', selectedOptions:myFruit"></select> 
 
<br />chose: 
 
<!-- ko text:myFruit().join(',') --> 
 
<!-- /ko -->