如何在Select2中实现value与data-test属性的搜索匹配？

AI 小北

2026-9-2

Select2 自定义搜索匹配范围配置方案

Select2 默认搜索逻辑仅匹配选项显示的文本内容，要实现同时匹配value属性、data-test自定义属性的需求，直接重写组件的matcher配置项即可，以下是可直接运行的实现代码：

基础HTML结构

和你现有结构保持一致即可：

<select class="custom-select2" style="width: 300px">
  <option value="Test 1" data-test="user-1">Test 1</option>
  <option value="Test 2" data-test="user-2">Test 2</option>
  <option value="Test 3" data-test="user-3">Test 3</option>
</select>

JS初始化配置

以下配置兼容Select2 4.x主流版本，匹配逻辑做了大小写不敏感处理：

$('.custom-select2').select2({
  matcher: function (searchParams, optionData) {
    // 无搜索关键词时返回全部选项
    if (!searchParams.term || $.trim(searchParams.term) === '') {
      return optionData;
    }
    // 过滤无对应DOM的特殊选项（如分组标题）
    if (!optionData.element) {
      return null;
    }

    // 统一转小写实现不区分大小写匹配
    const keyword = searchParams.term.toLowerCase();
    const matchText = optionData.text.toLowerCase();
    const matchValue = $(optionData.element).val().toLowerCase();
    const matchTestAttr = $(optionData.element).data('test').toLowerCase();

    // 文本、value、data-test任意字段命中关键词即返回选项
    if (
      matchText.includes(keyword) ||
      matchValue.includes(keyword) ||
      matchTestAttr.includes(keyword)
    ) {
      return optionData;
    }

    // 无匹配则过滤当前选项
    return null;
  }
});