Select2自定义匹配器实现：搜索text及data数组Value字段

我懂你现在的痛点——想让Select2不仅能匹配选项的text字段，还能搜到嵌套在data数组里的每个Value值，但自定义匹配器总是没搞对对吧？别担心，我给你写个完整可运行的示例，直接套用就能解决问题。

核心思路 #

Select2的自定义匹配器允许我们完全控制搜索逻辑，我们需要：

• 把用户输入的搜索词和选项的text做匹配
• 遍历选项的data数组，逐个检查每个Value字段是否和搜索词匹配
• 只要text或任意一个Value匹配，就保留该选项

完整示例代码 #

<!-- HTML部分 -->
<select id="mySelect" style="width: 300px;"></select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
  // 你的示例JSON数据
  const optionsData = [
    {
      "id":1,
      "text":"search term category",
      "data":[
        {"Key":"catalog","Value":"search term catalog"},
        {"Key":"make","Value":"search term make"},
        {"Key":"model","Value":"search term model"}
      ]
    },
    // 额外加个测试选项方便验证
    {
      "id":2,
      "text":"electronics",
      "data":[
        {"Key":"type","Value":"phone"},
        {"Key":"brand","Value":"apple"}
      ]
    }
  ];

  $('#mySelect').select2({
    data: optionsData,
    // 自定义匹配器核心逻辑
    matcher: function(params, data) {
      // 空搜索词时返回所有选项
      if ($.trim(params.term) === '') {
        return data;
      }

      // 统一转为小写，实现不区分大小写的搜索
      const searchTerm = params.term.toLowerCase();
      
      // 先检查text字段是否匹配
      if (data.text.toLowerCase().includes(searchTerm)) {
        return data;
      }

      // 遍历data数组，检查每个Value字段
      if (data.data && Array.isArray(data.data)) {
        for (let item of data.data) {
          if (item.Value && item.Value.toLowerCase().includes(searchTerm)) {
            return data;
          }
        }
      }

      // 所有字段都不匹配时，返回null过滤该选项
      return null;
    }
  });
});
</script>

代码说明 #

• 处理了空搜索词的边界情况，确保默认显示所有选项
• 用toLowerCase()实现不区分大小写的搜索，提升用户体验
• 先检查text字段，再遍历data数组里的每个Value，只要有一个匹配就保留选项
• 兼容了data字段不存在或不是数组的情况，避免出现运行报错

你可以测试一下：输入catalog、make或者apple，对应的选项都会被精准筛选出来，完全符合你的需求。

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