yii2 基于另一个字段自动填充相关字段

yii2 autofill related field based on another field

我有一个名为 employee_name 的字段,根据这个字段值,我想自动填充另一个字段 employee_id。我进行了搜索,找到了 this 个答案,并尝试在我的表单上实现它,但我得到的是 Error in ajax request。我表单中的 jquery 代码是

$('#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');
            }
        });
    });

我的控制器名称是Deposit,我的控制器代码是

public function actionEmployeeid($name){
$model= app\modules\settings\models\DepEmployee::findOne(['employee_name'=>$name]);
return \yii\helpers\Json::encode([
    'id'=>$model->employee_id
]); 

我的 ajax 代码不起作用的可能原因是什么?

我的表格很大。这是员工字段条目的一部分

<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>

如果我在你那里我应该怎么做:

这里是视图:

<?= $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

下面是填充 ID 输入的函数:(应该在您的控制器中)

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: jquery 函数获取员工姓名并将其发送到将在数据库中查找员工 ID 的控制器。然后发送具有默认值(员工 ID)的输入文本作为响应,并将此输入加载到表单中。

根据您的自动完成数据,您已经 employee_id。因此无需发出 ajax 请求来获取员工 ID。

DepEmployee 模型

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