如何用Select2实现含100个默认选项、支持AJAX搜索的数据库下拉框

核心需求 #

• 默认加载100个本地选项供直接选择
• 搜索时如果本地无匹配项，触发AJAX请求从数据库拉取相关选项

1. 基础HTML结构 #

先准备一个普通select标签，后续会通过JS填充默认选项并初始化Select2：

<select id="dynamic-select" class="form-control" style="width: 100%;"></select>

2. 完整实现代码（JS） #

以下代码包含默认选项生成、Select2初始化及AJAX搜索逻辑，直接适配需求：

$(document).ready(function() {
  // 生成模拟的100个默认选项（实际项目中可通过后端接口预加载）
  let defaultOptions = [];
  for (let i = 1; i <= 100; i++) {
    defaultOptions.push({
      id: i,
      text: `默认选项 ${i}`
    });
  }

  $('#dynamic-select').select2({
    data: defaultOptions,
    placeholder: '选择或搜索选项',
    minimumInputLength: 2, // 输入至少2个字符才触发AJAX请求
    ajax: {
      url: '/api/fetch-options', // 替换为你的后端接口地址
      type: 'GET',
      dataType: 'json',
      delay: 300, // 输入防抖，减少重复请求
      data: function(params) {
        return {
          keyword: params.term // 把搜索关键词传给后端
        };
      },
      processResults: function(response) {
        // 将后端返回的数据转为Select2需要的格式（id + text）
        return {
          results: response.map(item => ({
            id: item.id,
            text: item.display_name
          }))
        };
      },
      cache: true // 缓存搜索结果，避免重复请求相同关键词
    },
    // 自定义匹配逻辑：优先搜索本地选项，无匹配则触发AJAX
    matcher: function(params, data) {
      const searchTerm = params.term?.toLowerCase().trim() || '';
      // 无搜索词时返回所有本地选项
      if (!searchTerm) return data;
      // 本地选项匹配则返回
      if (data.text.toLowerCase().includes(searchTerm)) return data;
      // 本地无匹配，返回null让Select2触发AJAX
      return null;
    }
  });
});

3. 后端接口要求 #

后端需接收keyword参数，返回匹配的选项列表，格式示例：

[
  {"id": 101, "display_name": "AJAX返回选项1"},
  {"id": 102, "display_name": "AJAX返回选项2"}
]

关键细节说明 #

• 防抖设置：delay: 300避免用户输入过程中频繁发起请求，优化性能
• 最小输入长度：minimumInputLength: 2防止短关键词触发大量无效请求
• 本地+AJAX兼容：自定义matcher确保本地选项优先被检索，无匹配才触发远程请求
• 缓存机制：开启cache: true可复用历史搜索结果，降低服务器负载

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