Laravel中使用select2查询数据库渲染表格功能失效问题

• 原代码绑定的keyup事件仅在输入框接收到键盘输入时触发，select下拉选择选项的操作不会触发键盘抬起事件，因此AJAX请求根本不会发送
• 启用Select2插件后，原生select元素会被插件隐藏，替换为自定义渲染的DOM结构，仅监听原生元素的事件可能无法捕获Select2的选值动作
• 现有控制器逻辑未处理搜索参数为空的场景，空值时无返回内容会导致请求报错
• 路由定义末尾多余的斜杠可能引发301跳转，导致请求路径异常

1. 调整前端事件绑定 #

未使用Select2的普通select场景 #

直接将事件从keyup替换为change即可，select选项值发生变化时就会触发请求，建议使用路由名生成请求地址避免路径写死出错：

$(document).ready(function(){
    $('#search').on('change',function(){
        var query = $(this).val();
        $('#search_list').html('加载中...');
        $.ajax({
            url:"{{ route('get_student_info') }}",
            type:"GET",
            data:{'search':query},
            success:function(data){
                $('#search_list').html(data);
            },
            error: function(){
                $('#search_list').html('查询失败，请重试');
            }
        });
    });
});

已启用Select2插件的场景 #

除了监听原生change事件，还要兼容Select2自带的选值事件，确保选值动作能被捕获：

$(document).ready(function(){
    // 初始化Select2
    $('#search').select2({
        placeholder: "请选择准考证号",
        allowClear: true
    });

    // 同时绑定原生change和Select2选值事件，兼容所有触发场景
    $('#search').on('change select2:select',function(){
        var query = $(this).val();
        $('#search_list').html('加载中...');
        $.ajax({
            url:"{{ route('get_student_info') }}",
            type:"GET",
            data:{'search':query},
            success:function(data){
                $('#search_list').html(data);
            },
            error: function(){
                $('#search_list').html('查询失败，请重试');
            }
        });
    });
});

2. 补全控制器空值逻辑 #

原控制器在搜索参数为空时没有返回内容，会触发500错误，调整为全路径有返回值：

public function get_student_info(Request $request)
{
    $search_name = $request->input('search', '');
    // 空搜索值直接返回提示
    if ($search_name === "") {
        return '<p>请选择准考证号进行查询</p>';
    }

    $data = User::where('admission_num', 'like', '%'.$search_name.'%')->get();
    $output = '';
    if(count($data) > 0){
        $output = '
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Class</th>
                </tr>
            </thead>
            <tbody>';
        foreach($data as $row){
            $output .= '
                <tr>
                    <th scope="row">'.$row->name.'</th>
                    <td>'.$row->lastname.'</td>
                    <td>'.$row->class.'</td>
                </tr>';
        }
        $output .= '
            </tbody>
        </table>';
    } else {
        $output = '<p>No results</p>';
    }
    return $output;
}

3. 修正路由定义 #

去掉路由路径末尾多余的斜杠，避免不必要的301跳转：

Route::get('get-student-info', [ResultController::class, 'get_student_info'])->name('get_student_info');

修改完成后清除浏览器缓存刷新页面，选择下拉选项即可正常触发查询、渲染学生信息表格。

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