Laravel表单自动填充实现：选择NIS后自动补全关联字段

我来帮你搞定这个自动补全的需求～你现在的问题是只拿到了NIS的列表，没法关联获取其他学生信息，咱们可以通过后端API+前端AJAX的方式来实现，具体步骤如下：

1. 新增后端API接口，用于获取学生详情 #

首先在你的控制器里添加一个方法，用来根据选中的NIS查询对应的学生完整信息：

// 假设你的控制器是PKLController
public function getSiswaByNis(Request $request)
{
    $nis = $request->input('nis');
    // 只查询需要的字段，提升性能
    $siswa = Siswa::where('nis', $nis)->first(['name', 'academic_year']);
    
    if ($siswa) {
        return response()->json([
            'success' => true,
            'data' => $siswa
        ]);
    }
    
    return response()->json([
        'success' => false,
        'message' => '学生信息未找到'
    ]);
}

然后在路由文件（比如web.php）里添加这个API的路由：

Route::get('/siswa/get-by-nis', [PKLController::class, 'getSiswaByNis'])->name('siswa.getByNis');

2. 修改前端视图，添加AJAX事件监听 #

接下来要给表单元素加上ID方便JS操作，再编写监听事件来自动填充字段：

第一步：给表单元素添加ID #

修改NIS下拉框、姓名和学年输入框的代码，加上对应的ID：

<div class="form-group col-sm-6"> 
    {!! Form::label('nis', 'NIS:') !!} 
    {!! Form::select('nis', $data, null, ['class' => 'form-control', 'id' => 'nis-select']) !!} 
</div> 
<!-- Name Field --> 
<div class="form-group col-sm-6"> 
    {!! Form::label('name', 'Nama:') !!} 
    {!! Form::text('name', null,['class' => 'form-control', 'id' => 'name-input']) !!} 
</div> 
<!-- Academic Year Field --> 
<div class="form-group col-sm-12 col-lg-12"> 
    {!! Form::label('academic_year', 'Tahun Akademik:') !!} 
    {!! Form::text('academic_year', null, ['class' => 'form-control', 'id' => 'academic-year-input']) !!} 
</div>

第二步：添加AJAX监听代码 #

在视图的底部（比如</body>标签前）添加JavaScript代码，监听下拉框的变化事件，请求API并填充表单：

<script>
$(document).ready(function() {
    // 监听NIS下拉框的选择变化
    $('#nis-select').on('change', function() {
        const selectedNis = $(this).val();
        
        // 如果没有选中任何选项，清空输入框
        if (!selectedNis) {
            $('#name-input').val('');
            $('#academic-year-input').val('');
            return;
        }
        
        // 发送AJAX请求获取学生信息
        $.ajax({
            url: "{{ route('siswa.getByNis') }}",
            type: 'GET',
            data: { nis: selectedNis },
            success: function(response) {
                if (response.success) {
                    // 将获取到的数据填充到对应的输入框
                    $('#name-input').val(response.data.name);
                    $('#academic-year-input').val(response.data.academic_year);
                } else {
                    alert(response.message);
                    // 清空字段避免残留旧数据
                    $('#name-input').val('');
                    $('#academic-year-input').val('');
                }
            },
            error: function() {
                alert('获取学生信息失败，请重试');
            }
        });
    });
});
</script>

3. 可选优化建议 #

• 如果希望用户不能手动修改自动填充的字段，可以给输入框添加readonly属性，比如：

  {!! Form::text('name', null,['class' => 'form-control', 'id' => 'name-input', 'readonly' => true]) !!}
  

• 如果需要填充更多字段，只需要在后端API的first()方法里添加对应的字段，再在前端JS里补充赋值逻辑即可。

内容的提问来源于stack exchange，提问作者tasyadas