Yii2 - Как я могу добавить поиск в Dropdownlist Widget

Question

Добрый день!

Как я могу добавить поиск в выпадающий список?

Я хочу выпадающий поиск, как виджет Select2.

Выпадающий список:

<?= $form->field($modelRis, "[{$i}]lib_item_item_id")->dropDownList(
ArrayHelper::map(LibItem::find()->orderBy('item_description')->all(), 'item_id', 'item_description'),
[
    'prompt'=>'Select Item',
    'onchange'=>'
            var tmp = $(this).attr("id");
            var thisId = tmp.split("-");

            var tmp2 = "";
            var tmp3 = "";

            var sample_id = $(this).val();

            $.post( "'.Yii::$app->urlManager->createUrl(['online-requisition/listsofunit?item_id=']).'"+$(this).val(),
            function( data ) {
                $( "#risrequesteditem-"+thisId[1]+"-lib_unit_id").html( data );

                $( "#loop-"+thisId[1]+"-lib_item_item_id").val( sample_id );

                tmp2 = data;
                tmp3 = tmp2.split("=====");
                $( "#loop-"+thisId[1]+"-available_stock").val( tmp3[1] );
            });
        ',
    'pluginOptions' => [
            'allowClear' => true
    ],
])->label('Item',['class'=>'label-class']); ?>

Я не могу использовать виджет select2, потому что "onchange" или эта строка кода не поддерживаются:

'onchange'=>'
            var tmp = $(this).attr("id");
            var thisId = tmp.split("-");

            var tmp2 = "";
            var tmp3 = "";

            var sample_id = $(this).val();

            $.post( "'.Yii::$app->urlManager->createUrl(['online-requisition/listsofunit?item_id=']).'"+$(this).val(),
            function( data ) {
                $( "#risrequesteditem-"+thisId[1]+"-lib_unit_id").html( data );

                $( "#loop-"+thisId[1]+"-lib_item_item_id").val( sample_id );

                tmp2 = data;
                tmp3 = tmp2.split("=====");
                $( "#loop-"+thisId[1]+"-available_stock").val( tmp3[1] );
            });
        ',

Спасибо...

Обновления:

Если я собираюсь использовать виджет select2, чтобы иметь функцию поиска во время выбора элементов, возникнет проблема.

В:

Первый выбор его работы:

И функция onchange также работает. И автоматически заполняет все данные в поле формы (Item no, Unit and StockAvailable) после выбора элемента. 1-й выбор

второй выбор не работает: но я могу выбрать пункт. Проблема только в функции jquery onchange... 2nd Selection

Спасибо...

Answer 1

Как предложено Ajith выше, вы должны использовать виджет Yii2 Select2 с http://demos.krajee.com/widget-details/select2

Если вы перейдете к деталям, то увидите, что приведенный выше виджет позволяет вам добавлять обработчики событий, используя pluginEvents Настройки параметров виджета.

pluginEvents = [
"change" => "function() { log('change'); }",
"select2:opening" => "function() { log('select2:opening'); }",
"select2:open" => "function() { log('open'); }",
"select2:closing" => "function() { log('close'); }",
"select2:close" => "function() { log('close'); }",
"select2:selecting" => "function() { log('selecting'); }",
"select2:select" => "function() { log('select'); }",
"select2:unselecting" => "function() { log('unselecting'); }",
"select2:unselect" => "function() { log('unselect'); }"

];

Хотя невозможно обеспечить правильный код, не зная контекста и т. Д. Фрагмента кода, однако его можно переписать с помощью виджета Yii2 Select2, как показано ниже (приведенный ниже код не проверен, но должен дать представление о структуре):

use kartik\widgets\Select2;

$data = ArrayHelper::map(LibItem::find()->orderBy('item_description')->all(), 'item_id', 'item_description');

// Usage with ActiveForm and model
echo $form->field($modelRis, "[{$i}]lib_item_item_id")->widget(Select2::classname(), [
    'data' => $data,
    'options' => ['placeholder' => 'Select Item'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    'pluginEvents' => [
        'select2:select' => 'function(e) { 
            var tmp = e.target.id; 
            var thisId = tmp.split("-");

            var tmp2 = "";
            var tmp3 = "";

            var sample_id = e.target.value;

            $.post( "'.Yii::$app->urlManager->createUrl(['online-requisition/listsofunit?item_id=']).'"+$(this).val(),
            function( data ) {
                $( "#risrequesteditem-"+thisId[1]+"-lib_unit_id").html( data );

                $( "#loop-"+thisId[1]+"-lib_item_item_id").val( sample_id );

                tmp2 = data;
                tmp3 = tmp2.split("=====");
                $( "#loop-"+thisId[1]+"-available_stock").val( tmp3[1] );
            });
        }
        '
    ],
]);

Обратите внимание, что я использовал select2:select как обработчик событий.

Я должен был предоставить это как отдельный ответ, потому что у меня недостаточно репутации, чтобы добавить комментарий.

Answer 2

Ты можешь использовать yii2 select2 widget для этого. Хорошая документация с демоверсиями доступна на

http://demos.krajee.com/widget-details/select2

Пример использования с активной формой приведен ниже

// Usage with ActiveForm and model
echo $form->field($model, 'state_1')->widget(Select2::classname(), [
    'data' => $data,// the select option data items.The array keys are option values, and the array values are the corresponding option labels
    'options' => ['placeholder' => 'Select a state ...'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    'pluginEvents' => [
         'change' => 'function(){// write your on change code here}'
     ]
]);