Select2是否支持按拆分独立字符串匹配过滤下拉选项？

核心逻辑是重写Select2默认的匹配器，将搜索关键词按空格拆分为多个独立片段，仅当选项文本包含所有片段时才返回匹配结果，同时内置大小写不敏感处理。

第一步：编写自定义匹配函数 #

function customMatcher(params, data) {
  // 搜索内容为空时返回全部选项
  if ($.trim(params.term) === '') {
    return data;
  }
  // 选项无文本字段时直接排除
  if (typeof data.text === 'undefined') {
    return null;
  }

  // 搜索关键词转小写后按任意数量空格拆分，过滤空片段
  const searchTerms = params.term.toLowerCase().split(/\s+/).filter(term => term);
  // 选项文本统一转小写
  const optionText = data.text.toLowerCase();

  // 验证所有搜索片段都存在于选项文本中
  const allMatch = searchTerms.every(term => optionText.includes(term));

  return allMatch ? data : null;
}

第二步：绑定到Select2配置 #

初始化Select2时指定自定义匹配器即可，原有其他配置不需要修改：

// 替换为你的下拉框选择器
$('#your-select').select2({
  matcher: customMatcher
  // 其他原有配置项保持不变
});

效果验证 #

以给出的选项为例，输入关键词Phone Brand A时，会拆分为phone、brand、a三个独立片段校验：

• 匹配项：1. Phone Brand 128GB A Silver、2. Phone Brand 256GB A Black、5. Phone Brand 256GB A White
• 排除项：3. Phone Brand 256GB Black、4. Phone Brand 128GB Red（不含关键词a）
  完全符合预期需求，同时大小写不敏感，输入小写关键词也能得到相同结果。

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