yii2 autofill related field based on another field - yii2

Question

I've a field called employee_name and depending on this field value I want to autofill another field employee_id. I've searched and I found this answer and tried implementing this on my form but I'm getting Error in ajax request. The jquery code in my form is
$('#emp').focusout(function() {
empName = this.value;
if ( empName != '' || empName != null ) {
$('#depcustomer-employee_name').val(empName);
}
$.ajax({
url: '".yii\helpers\Url::toRoute("deposit/employeeid")."',
dataType: 'json',
method: 'GET',
data: {name: $(this).val()},
success: function (data, textStatus, jqXHR) {
$('#depcustomer-employee_id').val(data.id);
},
beforeSend: function (xhr) {
alert('loading!');
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('An error occured!');
alert('Error in ajax request');
}
});
});
My Controller name is Deposit and my controller code is
public function actionEmployeeid($name){
$model= app\modules\settings\models\DepEmployee::findOne(['employee_name'=>$name]);
return \yii\helpers\Json::encode([
'id'=>$model->employee_id
]);
What could be the possible reason that my ajax code is not working?
My form is quite big. Here's the part of the employee field entry
<div class="row">
<div class="col-md-6">
<?= $form->field($model, 'employee_id')->textInput(['maxlength' => true]) ?>
</div>
<div class="col-md-6">
<label for='emp'>Employee Name</label>
<?= Html::activeHiddenInput($model, 'employee_name')?>
<?php
echo AutoComplete::widget([
'name' => 'employee_name',
'id' => 'emp',
'clientOptions' => [
'source' => $dataEmp,
'autoFill'=>true,
'minLength'=>'2',
'select' => new JsExpression("function( event, ui ) {
$('#depcustomer-name').val(ui.item.id);
}")
],
]);
?>
</div>
</div>

Answer 1

According to your autocomplete data you already have employee_id. So no need to make ajax request to get employee id.
DepEmployee Model
public static function getEmpData()
{
$dataEmp = DepEmployee::find()
->select(['employee_name as value', 'employee_name as label','employee_id as id'])
->asArray()
->all();
return $dataEmp;
}
_form
<?= AutoComplete::widget([
'name' => 'employee_name',
'id' => 'emp',
'clientOptions' => [
'source' => DepEmployee::getEmpData(),
'autoFill'=>true,
'minLength'=>'2',
'select' => new JsExpression("function( event, ui ) {
$('#depcustomer-name').val(ui.item.id);
$('#depcustomer-employee_id').val(ui.item.id);
}")
],
]);?>

Answer 2

What i should do if i was at your place:
Here the view:
<?= $form->field($model, 'employeeName')->textInput([
// I use onfocusout instead of focusout
'onfocusout' => '
$.post("generateemployeeid?name="+$(this).val(), function(data) {
$("#employee_id_container").html(data);
});
',
]) ?>
<div id="employee_id_container"></div> // <- I will autofill here
Now here is the function who will fill the ID input: (should be in your controller)
public function actionGenerateemployeeid($name) {
$employeeModel = DepEmployee::find()
->where(['employee_name' => $name])
->one();
if($employeeModel !== NULL) {
echo 'Employee ID: <input type="text" name="EmployeeID" value="'.$employeeModel->employee_id.'" readonly><br>';
}
else {
// error 404
}
}
Resume: the jquery function take the employee name and send to the controller who will look for the employee ID in the database. Then send an input text with default value (employee ID) as response and load this input in the form.