Select2问题：Ajax选择后选项无法正常渲染

问题分析 #

你的Select2组件能正常加载Ajax搜索结果，但选择后选择框为空，核心原因有两个：

1. 返回的选项对象缺少text属性——Select2默认依赖该属性渲染选中后的内容，同时创建<option>标签时也会用它填充文本。
2. 仅配置了templateResult处理下拉选项的显示，但未配置templateSelection处理选中后的显示逻辑。

解决方案 #

方法1：补充text属性（推荐）

在processResults的映射函数中，为每个选项添加text属性，值为你希望显示的内容：

$("#customerSelect").select2({
  dropdownAutoWidth: true,
  templateResult: iconUser,
  minimumInputLength: 3,
  placeholder: "-- Select a customer --",
  ajax: {
    url : "/admin/ajax/orders.php",
    type:'POST',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        searchTerm: params.term,
        action: 'listCustomers',
        isJs: true
      };
    },
    processResults: function (result) {
      return {
        results: $.map(result['data'], function (item) {
          return {
            id: item.id,
            text: `${item.customerName} - ${item.stockName}`, // 新增text属性
            customerName: item.customerName,
            stockName: item.stockName,
            customerType: item.customerType
          }
        })
      };
    }
  }
});

方法2：添加templateSelection配置

如果需要保持自定义的图标显示逻辑，在Select2初始化时添加templateSelection配置，复用你的iconUser函数（或单独写选中后的模板）：

$("#customerSelect").select2({
  dropdownAutoWidth: true,
  templateResult: iconUser,
  templateSelection: iconUser, // 新增此配置，处理选中后的显示
  minimumInputLength: 3,
  placeholder: "-- Select a customer --",
  // 其他ajax配置不变
});

如果需要对选中后的样式做调整，可以单独定义选中模板函数：

function iconUserSelected(userDetails) {
  return $(`<span><i class="fa-solid fa-${userDetails.customerType}"></i> ${userDetails.customerName} - ${userDetails.stockName}</span>`);
}

// 初始化时配置
$("#customerSelect").select2({
  // ...其他配置
  templateSelection: iconUserSelected
});

验证效果 #

修改后重新测试，选择选项后：

• <option>标签会自动填充text属性对应的内容
• Select2的选择框会正确渲染你定义的文本和图标

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