Select2搜索功能如何实现选项部分文本隐藏但仍可作为关键词检索

方案1：自定义检索属性（更推荐，耦合度低） #

1. 调整option结构，将展示文本和隐藏检索词拆分，隐藏检索词存入自定义data-*属性：

<select class="select form-control" name="state" onchange="searchMenu(this)">
  <option value="" selected hidden></option>
  @for (int i = 0; i < Menu2.Count; i++)
  {
    <!-- data-search-keywords存需要隐藏的检索关键词，option文本仅放要展示的内容 -->
    <option class="form-control" value="some-url" title="some-tooltip" data-search-keywords="@Menu2[i].HiddenName">@Menu2[i].Name</option>
  }
</select>

2. 初始化Select2时自定义匹配规则，让搜索逻辑同时命中显示文本和隐藏的检索关键词：

$('.select').select2({
  // 自定义匹配器
  matcher: function(params, data) {
    // 无搜索关键词时返回所有选项
    if ($.trim(params.term) === '') return data;
    const searchTerm = params.term.toLowerCase();
    // 匹配可见文本
    if (data.text.toLowerCase().includes(searchTerm)) return data;
    // 匹配隐藏的检索关键词
    const hiddenKeywords = $(data.element).data('search-keywords')?.toLowerCase() || '';
    if (hiddenKeywords.includes(searchTerm)) return data;
    // 无匹配返回空
    return null;
  }
})

方案2：兼容现有option结构（无需改后端渲染逻辑） #

如果你不想调整现有option的文本结构，直接自定义Select2的渲染模板，前端展示时自动过滤掉隐藏内容，搜索时仍用完整文本匹配：

$('.select').select2({
  // 下拉选项渲染逻辑，根据你的实际文本格式调整正则
  templateResult: function(data) {
    // 示例正则为去掉末尾的(隐藏名称)部分，可根据你的实际格式修改
    const showText = data.text.replace(/\s*\(hidden name\)$/, '');
    return $('<span>').text(showText);
  },
  // 选中后输入框展示逻辑，和上面保持一致
  templateSelection: function(data) {
    const showText = data.text.replace(/\s*\(hidden name\)$/, '');
    return $('<span>').text(showText);
  }
})

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