yii2 kartik connect select2和sortableinput

我用的是 select2 和 sortableinput 卡提克的小部件。我想用select2选择一些东西,并在sortableinput小部件中使用selected元素。我在想我怎样才能做到这一点。只有js?还是必须使用ajax/pjax?因为我对这个话题还不熟悉,所以从哪里开始帮助会很酷。

再见。

编辑:

select2使用ajax和 mapquestapi 搜索地址。如果选择了找到的地址,则应将数据放入可排序输入字段。所以可以列一个地址列表。在可排序输入中,可以对地址进行排序。有关原型,请参见下面的图像和基本代码。

use kartik\select2\Select2;
use kartik\sortinput\SortableInput;

$ajaxJs = <<< JS
function(data) {
    console.log(data.params.data);
    // put here code for logic?
}
JS;    

echo Select2::widget([
    'name' => 'kv-repo-template',
    'value' => '14719648',
    'initValueText' => 'Adresse suchen ...',
    'options' => ['placeholder' => 'Search for a repo ...'],
    'pluginOptions' => [
        'allowClear' => true,
        'minimumInputLength' => 1,
        'ajax' => [
            'url' => "http://www.mapquestapi.com/geocoding/v1/address?key=key_here",
            'dataType' => 'json',
            'delay' => 250,
            //'data' => new JsExpression('function(params) { return {q:params.term, page: params.page}; }'),
            'data' => new JsExpression('function(params) { return {street:params.term, state:"Upper Austria", thumbMaps:false}; }'),
            'processResults' => new JsExpression($resultsJs),
            'cache' => true
        ],
        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
        'templateResult' => new JsExpression('formatRepo'),
        'templateSelection' => new JsExpression('formatRepoSelection'),
    ],
    'pluginEvents' => [
        "select2:select" => new JsExpression($ajaxJs),
    ],
]);

   $form->field($model, 'sort_list')->label(false)->widget(SortableInput::classname(), [
'items' => [
    1 => ['content' => 'Adress #1'],
    2 => ['content' => 'Adress #2'],
    3 => ['content' => 'Adress #3'],
],
'hideInput' => true,
'options' => ['class' => 'form-control', 'readonly' => true]]);

编辑2:

感谢@muhammadomeraslam我修改了密码。所以现在条目将被放入sortableinput列表。很遗憾,我不能拖放新条目。我需要重新初始化sortableinput列表吗?

$ajaxJs = <<< JS
function(data) {
    console.log(data.params.data);
    doc = new DOMParser().parseFromString('<li data-key="' + (document.querySelector('.sortable').childElementCount + 1) + '"role="option" aria-grabbed="false" draggable="true">' + data.params.data.street + '</li>', "text/html").body.firstChild;
    document.querySelector('.sortable').appendChild(doc);
}
JS;

编辑3:

获取sortable并调用sortable(); $('#address-sortable').sortable();

$ajaxJs = <<< JS
function(data) {
    doc = new DOMParser().parseFromString('<li data-key="' + (document.querySelector('.sortable').childElementCount + 1) + '"role="option" aria-grabbed="false" draggable="true">' + data.params.data.street + '</li>', "text/html").body.firstChild;
    document.querySelector('.sortable').appendChild(doc);
    $('#address-sortable').sortable();
}
JS;

并设置sortableinput列表的id:

$form->field($model, 'sort_list')->label(false)->widget(SortableInput::classname(), [
    'items' => [
        1 => ['content' => 'Adress #1'],
        2 => ['content' => 'Adress #2'],
        3 => ['content' => 'Adress #3'],
    ],
    'hideInput' => false,
    'options' => ['class' => 'form-control', 'readonly' => true, 'id'=>'address']
]);