Yii2-如何在Dropdownlist小部件中添加搜索

你好

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

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

第二个选择不起作用： 但我可以选择一个项目。只有jquery函数onchange才是问题所在。。。

---

谢谢…

您可以使用

yii2 select2 widget

实现此目的。有很好的文档和演示可在

下面给出了使用活动表单的示例

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

---

正如上面Ajith所建议的，您应该使用

如果仔细查看这些细节，您会发现上面的小部件确实允许您使用小部件的

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小部件重新编写代码，如下所示（下面的代码未经测试，但应该可以让您了解其结构）：

请注意，我使用了

select2:select

作为事件处理程序

---

我不得不单独回答这个问题，因为我没有足够的声誉来添加评论。

对不起，我不太理解你的问题。您的问题到底是什么？您希望实现什么？谢谢，我如何才能在dropdownlist小部件上添加搜索？tnx以获取回复。。但是我不能使用select2小部件，因为我不知道如何在该小部件中添加onchange函数。。。我将用dropdownlist的完整代码更新我的帖子。在Yii2 select2小部件的文档中，有一个名为PlugineEvents的属性，您可以在其中编写@sm1979提到的select2 jquery事件。对于您的代码，您必须为此使用更改事件。我已经编辑了我的答案以包含更改事件。非常感谢@A我真的很感谢你的帮助。。但是当我使用select2小部件并在该小部件中添加插件事件时，事件中的更改功能没有加载，我不知道为什么。。我要更新我的帖子..谢谢@sm1979，但是当我使用select2小部件并在该小部件中添加插件事件时，事件中的更改功能没有加载，我不知道为什么。。我要更新我的帖子

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'); }"

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