搜索select2中的select属性

Question

是否可以在select2中搜索文本和另一个属性的组合？例如，用户是否可以搜索“数据测试”的值和下面的文本：

<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>

这样搜索“测试2”和“6”显示相同的单一选项？

这是在页面加载的绑定列表上，因此无法在其他位置进行过滤。

谢谢 -

Answer 1

一旦找到它就足够简单了 -

创建自定义匹配函数，类似于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 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

我刚刚添加选择选项data-country-name（因为它是国家的选择），oryginal只有这些国家的短'标签'（例如GB，AF，PL）。然后在select2.js中转到函数匹配器（params，data），它在每个keyPress上启动，并写道：

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;
}

Answer 4

您将不得不处理我认为的第二个选择器，但您可以根据第一种方式执行简单的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>