Rails问题：grouped_collection_select+select2搜索不显示关联事项

使用Rails的grouped_collection_select生成客户-事项的分组选择框，结合Select2后，搜索客户名称时对应的事项选项会消失无法选择。这是因为Select2默认搜索逻辑仅匹配选项文本，不会在组名匹配时自动保留组内所有选项，以下是具体解决方案：

1. 优化Rails端分组数据查询 #

先修正grouped_collection_select的数据源，避免生成重复的客户分组：

<%= f.grouped_collection_select(
  :matter_id,
  Client.joins(:matters).distinct, # 用distinct替代group，避免重复分组
  :matters,
  :name_with_code, # 分组标题（客户名称+编码）
  :id, # 选项值（事项ID）
  :name_with_code, # 选项文本（事项名称+编码）
  { include_blank: 'Select a matter' }, # 修正占位符文本（原文本为笔误）
  { id: 'one_drive_matter_select', style: "width:100%" }
) %>

2. 自定义Select2搜索匹配逻辑 #

修改Select2初始化代码，添加自定义matcher函数，让搜索同时匹配组名和选项文本，且组名匹配时显示该组所有选项：

$("#one_drive_matter_select").select2({
  theme: "material",
  placeholder: I18n.t('select_matter'),
  allowClear: true,
  matcher: function(params, data) {
    // 无搜索关键词时返回全部数据
    if ($.trim(params.term) === '') {
      return data;
    }

    var term = params.term.toLowerCase();
    var modifiedData = $.extend({}, data, true);

    // 处理分组逻辑
    if (data.children) {
      var matchedChildren = [];
      var groupNameMatches = data.text.toLowerCase().includes(term);

      // 遍历组内选项，组名匹配则保留所有选项，同时保留文本匹配的选项
      $.each(data.children, function(index, child) {
        if (child.text.toLowerCase().includes(term) || groupNameMatches) {
          matchedChildren.push(child);
        }
      });

      // 有匹配项则返回该分组
      if (matchedChildren.length > 0) {
        modifiedData.children = matchedChildren;
        return modifiedData;
      } else {
        return null;
      }
    }

    // 处理非分组选项（当前场景不会触发）
    if (data.text.toLowerCase().includes(term)) {
      return data;
    }

    return null;
  }
});

逻辑说明 #

重写的matcher函数实现了两个核心逻辑：

• 搜索关键词为空时，正常显示所有分组和选项
• 搜索关键词存在时：
  1. 检查分组名称是否匹配，匹配则保留该组下所有事项选项
  2. 同时检查每个事项选项的文本是否匹配，匹配的选项也会被保留
  3. 仅当分组有匹配项时才会显示该分组，否则过滤掉

修改后，搜索客户名称时对应的所有事项会完整显示，用户可直接选择；搜索事项名称时也能精准匹配到目标选项。

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