Yii2 - 如何在下拉列表小部件中添加搜索

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 功能 也一直在工作。并在选择项目后自动填写表单字段中的所有数据（项目编号、单位和库存可用）。 1st Selection

第二个选择不起作用： 但我可以选择一个项目。只有jquery函数onchange是问题...... 2nd Selection

谢谢...

Answer 1

按照上面 Ajith 的建议，您应该使用来自 http://demos.krajee.com/widget-details/select2 的 Yii2 Select2 Widget

如果你仔细看细节你会发现上面的小部件确实允许你通过使用小部件的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'); }"

];

虽然在不知道代码 sn-p 的上下文等的情况下无法提供正确的代码，但是可以使用 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}'
     ]
]);