如何实现select2通过ajax检索搜索数据同时保留预加载的默认选项？

核心实现逻辑是在select2的数据处理阶段，将预先加载的静态选项和动态搜索结果合并，同时通过唯一ID去重，即可同时保留原有选项、支持多数据源搜索。

完整实现步骤 #

1. 基础HTML结构（预置静态选项） #

先在select标签内写入需要预加载的原有选项：

<select id="targetSelect" style="width: 300px;">
  <option value="1">预加载选项1</option>
  <option value="2">预加载选项2</option>
  <option value="3" selected>默认选中的预加载选项</option>
</select>

2. 按数据源类型初始化Select2 #

场景1：预加载选项 + 本地JavaScript数组搜索

// 本地待搜索的数组数据
const localSearchData = [
  {id: 4, text: '本地搜索结果1'},
  {id: 5, text: '本地搜索结果2'}
];

$('#targetSelect').select2({
  data: (function() {
    // 提取已有预加载选项
    const preloadOptions = $.map($('#targetSelect option'), function(option) {
      return {id: option.value, text: option.text};
    });
    // 合并两类数据，按ID去重避免重复选项
    return [...preloadOptions, ...localSearchData].filter((item, index, self) => 
      self.findIndex(t => t.id === item.id) === index
    );
  })(),
  placeholder: '请选择或搜索'
})

场景2：预加载选项 + AJAX远程搜索

$('#targetSelect').select2({
  ajax: {
    url: '你的后端查询接口地址',
    dataType: 'json',
    delay: 250, // 输入防抖延迟
    data: function (params) {
      return {
        keyword: params.term, // 搜索关键词传给后端
        page: params.page || 1
      };
    },
    processResults: function (resp, params) {
      // 提取预加载的静态选项
      const preloadOptions = $.map($('#targetSelect option'), function(option) {
        return {id: option.value, text: option.text};
      });
      // 合并预加载选项和接口返回的搜索结果，按ID去重
      const mergedList = [...preloadOptions, ...resp.results].filter((item, index, self) => 
        self.findIndex(t => t.id === item.id) === index
      );
      // 可选配置：预加载选项排在搜索结果前
      mergedList.sort((a, b) => {
        const aIsPreload = preloadOptions.some(opt => opt.id === a.id);
        const bIsPreload = preloadOptions.some(opt => opt.id === b.id);
        if (aIsPreload && !bIsPreload) return -1;
        if (!aIsPreload && bIsPreload) return 1;
        return 0;
      });
      return {
        results: mergedList,
        pagination: {
          more: (params.page * 20) < resp.total // 分页逻辑按需调整
        }
      };
    },
    cache: true
  },
  minimumInputLength: 0, // 配置为0时，未输入内容也会显示预加载选项
  placeholder: '请选择或搜索'
})

注意事项 #

• 如果需要空输入时仅显示预加载选项，可在processResults中判断params.term为空时直接返回preloadOptions，不合并接口返回数据
• 预加载选项的selected默认选中状态会自动保留，无需额外配置
• 去重逻辑必须以选项的id为唯一判断标准，避免出现重复选项

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