Select2 Ajax结果模板渲染问题：自定义显示格式报错

undefined错误的核心原因是模板函数里访问了不存在的字段，或是没处理Select2内置的特殊选项（比如搜索时的loading状态）。结合你的需求，直接上可运行的修正方案：

1. 先确认API返回的JSON结构（示例） #

确保你的API返回数据格式和字段名准确，比如：

[
  {
    "id": "1",
    "city": "Los Angeles",
    "state": "California",
    "zipcode": "90001"
  },
  {
    "id": "2",
    "city": "Chicago",
    "state": "Illinois",
    "zipcode": "60601"
  }
]

2. 修正后的Select2初始化代码 #

$('#city-select').select2({
  ajax: {
    url: '/your-api-url',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // 搜索关键词
        page: params.page || 1
      };
    },
    processResults: function (data) {
      return {
        results: data // 直接返回API数据，确保每个项包含id和所需字段
      };
    },
    cache: true
  },
  minimumInputLength: 2,
  // 搜索结果显示模板
  templateResult: function (city) {
    // 先过滤Select2自带的loading项（无自定义字段）
    if (!city.id) {
      return city.text;
    }
    // 拼接成「城市, 州 邮编」格式
    return `${city.city}, ${city.state} ${city.zipcode}`;
  },
  // 选中后显示模板
  templateSelection: function (city) {
    // 选中后仅显示城市名，同时兼容默认占位项
    return city.city || city.text;
  }
});

3. 关键注意事项 #

• 字段名严格匹配：如果API返回的邮编字段是zip而非zipcode，或是州字段叫province，必须同步修改模板里的字段名，否则会触发undefined。
• 处理特殊项：templateResult里的!city.id判断必须加，不然搜索时的loading项会因无自定义字段导致报错。
• 兜底逻辑：templateSelection里的|| city.text是为了兼容初始化时的默认占位选项，避免空值或undefined显示。

如果还是报错，打开浏览器控制台查看具体是哪个字段undefined，对照API返回结构调整即可。

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