Is it possible to search on a bination of the text and another attribute in select2? For example, can the user search on both the value of "data-test" and text below:

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

Such that searching for "Test 2" and "6" show the same single option?

This is on a list bound at the page load, so it can't be filtered elsewhere.

Thanks -

Is it possible to search on a bination of the text and another attribute in select2? For example, can the user search on both the value of "data-test" and text below:

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

Such that searching for "Test 2" and "6" show the same single option?

This is on a list bound at the page load, so it can't be filtered elsewhere.

Thanks -

• javascript
• jquery
• jquery-select2

4 Answers 4

It's simple enough once found -

Create a custom matching function, similar to "matcher" in select2.js:

function customMatcher(params, data) {
    // Always return the object if there is nothing to pare
    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;
}

I added the "data('test')" to the function above and updated the initialization to:

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

Works great.

You can create your own custom matcher, here is your example:

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/pat/matcher'], function (oldMatcher) {
      $("select").select2({
        matcher: oldMatcher(matchStart)
      })
    });

The documentation about it you could find it here https://select2.github.io/announcements-4.0.html#new-matcher let me know if this suit your problem

I just added to select options data-country-name (since it was a select for country) which in oryginal had only short 'tags' of these countries (GB, AF, PL for example). Then in select2.js went to function matcher(params,data) which launch on every keyPress, and wrote:

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

You will have to work on the second selector i think but you can just do a simple if statement switching based off of if it was found the first way like so:

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

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

    alert(found.val());

});

you will have to add a button too.

<button >Clicky</button>