Yii2 Картик соединяет Select2 и SortableInput

Question

Я использую виджет select2 и sortableinput от kartik. Я хочу выбрать что-то с помощью select2 и иметь выбранный элемент в виджете sortableinput. Мне было интересно, как я могу достичь этого. Только с 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?

$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:

Получите сортируемый и вызовите сортируемый (); $('#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;

и установите идентификатор для списка сортируемых входных данных:

$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']
]);

Answer 1

Вы можете сделать это с помощью javascript внутри select:select событие для select2,

Для добавления нового элемента в сортируемый список вы можете использовать DOMParser().parseFromString добавить html для нового предмета (li), я предполагаю, что HTML-узлы похожи <li class="p1 mb1 blue bg-white">Address content</li> а затем использовать querySelector().appendChild() добавить его в .js-sortable-buttons контейнер.

Вы должны обновить javascript в верхней части вашего обзора к следующему.

$ajaxJs = <<< JS
function(e) {
    doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white">${e.currentTarget.options[e.currentTarget.options.selectedIndex].text}</li>`, "text/html").body.firstChild;
    document.querySelector('.js-sortable-buttons').appendChild(doc);
}
JS;    

Дополнительные примеры вы можете посетить html5sortable примеры, которые являются основой для yii2-sortable,