在 select2 中搜索 select 属性

Question

是否可以在 select2 中搜索文本和另一个属性的组合？例如，用户可以搜索 "data-test" 的值和下面的文本：

<option value="185" data-test="5">Test</option>
<option value="186" data-test="6">Test 2</option>
<option value="187" data-test="7">Test 3</option>

这样搜索 "Test 2" 和“6”会显示相同的单个选项吗？

这是在页面加载时绑定的列表，因此无法在其他地方过滤。

谢谢 -

Answer 1

我认为你将不得不处理第二个选择器，但你可以做一个简单的 if 语句切换，如果它被发现是第一种方式，就像这样：

$( 'button' ).click(function() {
    var found = $("option[data-test='6']");

    if(typeof found == 'undefined'){
      found = $('option[text="Test 2"]');
    }

    alert(found.val());

});

您还必须添加一个按钮。

<button >Clicky</button>

Answer 2

您可以创建自己的自定义匹配器，这是您的示例：

function matchStart (term, text, option) {
      console.log($(option.element).data("test"));
      if (text.toUpperCase().indexOf(term.toUpperCase()) == 0 || ($(option.element).data("test") !== undefined && $(option.element).data("test") == term)) {
        return true;
      }

      return false;
    }

    $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
      $("select").select2({
        matcher: oldMatcher(matchStart)
      })
    });

关于它的文档你可以在这里找到它https://select2.github.io/announcements-4.0.html#new-matcher让我知道这是否适合你的问题

Answer 3

一旦找到就很简单 -

创建自定义匹配函数，类似于select2.js中的"matcher"：

function customMatcher(params, data) {
    // Always return the object if there is nothing to compare
    if ($.trim(params.term) === '') {
        return data;
    }

    ... OTHER MATCHING CODE


    // Check if the text contains the term
    if (original.indexOf(term) > -1) {
        return data;
    }

    // Check if the data occurs
    if ($(data.element).data('test').toString().indexOf(params.term) > -1) {
        return data;
    }

    // If it doesn't contain the term, don't return anything
    return null;
}

我在上面的函数中添加了 "data('test')" 并将初始化更新为：

    $("#ddl").select2({
        matcher: customMatcher
    });

效果很好。

Answer 4

我刚刚添加到 select 选项 data-country-name（因为它是国家/地区的 select），原来只有 'tags' 这些国家/地区（GB，例如 AF、PL）。然后在 select2.js 中转到在每次按键时启动的函数 matcher(params,data)，并写道：

var dataAttr = String(data.element.getAttribute('data-country-name'));
var termP = stripDiacritics(params.term).toUpperCase();
var org = stripDiacritics(dataAttr).toUpperCase();
if (org.indexOf(termP) > -1) {
        return data;
}

在 select2 中搜索 select 属性

Search on select attribute in select2

javascript

jquery

select2