Laravel项目中Select2 AJAX请求触发TypeError错误求助

错误原因分析 #

1. 非法配置参数：你在Select2初始化配置中添加了status: 0，这不是Select2的合法配置项，导致组件内部处理时尝试读取未定义的关联属性，触发报错。
2. 返回数据格式不匹配：Select2的AJAX模式要求processResults函数返回包含results键的对象，且每个选项需包含id和text字段（默认规则），你的代码未做格式转换，后端返回的字段也不符合要求。

修正步骤 #

1. 前端JS代码修正

移除无效的status: 0配置，同时在processResults中转换数据格式：

import 'select2';

let baseurl = window.location.origin;

$(window).on('load', function () {
    $('#produtos-select2').select2({
        multiple: true,
        ajax: {
            url: baseurl + "/produtos/ajax", // 补充斜杠避免URL拼接错误
            dataType: 'json',
            delay: 250,
            type: 'get',
            data: function (params) {
                return {
                    nome: params.term,
                    page: params.page || 1 // 可选：添加分页参数优化性能
                }
            },
            processResults: function (data) {
                // 将后端数据转换为Select2要求的格式
                return {
                    results: data.map(item => ({
                        id: item.id,
                        text: item.nome,
                        valor: item.valor // 可选：保留额外字段供后续使用
                    }))
                };
            }, 
            cache: true,
        },
        placeholder: "Selecione produtos" // 可选：添加占位提示
    });
});

2. 后端Laravel代码修正

将返回数据的nome字段映射为Select2默认需要的text字段，两种实现方式：

方式一：查询时直接重命名字段

return Produto::select('id', 'nome as text', 'valor')->get();

方式二：返回后映射处理

return Produto::select('id', 'nome', 'valor')->get()->map(function($item) {
    return [
        'id' => $item->id,
        'text' => $item->nome,
        'valor' => $item->valor
    ];
});

额外优化建议 #

• 如果商品数据量较大，建议后端使用paginate()代替get()实现分页，配合前端的page参数，避免一次性返回大量数据影响性能。
• 检查AJAX请求的URL是否正确，可通过浏览器开发者工具的Network标签查看请求地址和返回数据。

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