Question

美好的一天！

如何在下拉列表中添加搜索？

我想要一个下拉搜索，例如 Select2小部件。

DROPDOWNLIST：

<?= $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小部件，因为＆＃39; onchange＆＃39; 或此行代码不受支持：

'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和StockAvailable）。 1st Selection

第二次选择无效：但我可以选择一个项目。只有jquery函数onchange是问题...... 2nd Selection

...谢谢

Answer 1

您可以将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}'
     ]
]);

Answer 2

正如上面的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'); }"

];

虽然在不知道代码片段的上下文等情况下无法提供正确的代码，但是可以使用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作为事件处理程序。

我必须将此作为单独的答案提供，因为我没有足够的声誉来添加评论。

Yii2 - 如何在Dropdownlist Widget中添加搜索

2 个答案: