Yii2 - 如何在Dropdownlist小工具中添加搜索

Question

美好的一天！

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

我想要一個下拉式搜索，如選擇2小部件。

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

我不能使用選擇2小部件，因爲'的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]); 
      }); 
     ', 

謝謝...

更新：

如果我要去你sed select2小部件爲了在選擇項目期間具有搜索功能將會有問題。

在：

第一選擇其工作：

而且平變化功能一直還在努力。在選擇項目後，自動填寫表單域中的所有數據（項目編號，單位和StockAvailable）。 1st Selection

第二選擇不工作： 但我可以選擇一個項目。只有jQuery函數的onchange是問題... 2nd Selection

謝謝...

Answer 1

給出如上文所建議的阿吉特，你應該從http://demos.krajee.com/widget-details/select2

使用Yii2選擇二小部件

如果仔細查看細節，您會發現上面的小部件允許您使用小部件的參數設置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}' 
    ] 
]);