Yii2 - How can I add a search in Dropdownlist Widget - yii2

Question

Good day!
How can I add a search on a dropdownlist?
I want a dropdown search like the Select2 widget.
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']); ?>
I can't use the select2 widget because the 'onchange' or this line of code is not supported:
'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] );
});
',
Thanks...
Updates:
If i'm going to used the select2 widget in order to have a search function during the selection of items there will be a problem.
In the :
first selection its working:
And the onchange function has been working also. And automatically fill all the data in form field (Item no, Unit and StockAvailable) after the selection of item.
1st Selection
second selection is not working:
But I can select an item. Only the jquery function onchange is the problem...
2nd Selection
Thanks...

Answer 1

As suggested by Ajith above, you should use the Yii2 Select2 Widget from http://demos.krajee.com/widget-details/select2
If you go through the details you will find that the above widget does allow you to add event handlers by using the pluginEvents parameter settings of the widget.
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'); }"
];
Although it's not possible to provide proper code without knowing the context etc of your code snippet, however it can be re-written using Yii2 Select2 widget as below (the code below is untested, but should give you an idea of the structure):
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] );
});
}
'
],
]);
Please note I have used select2:select as the event handler.
I had to provide this as a separate answer because I don't have enough reputation to add a comment.

Answer 2

You can use yii2 select2 widget for this purpose. There is good documentation with demos available at
http://demos.krajee.com/widget-details/select2
An example usage with active form is given below
// 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}'
]
]);