How do I write custom select2 (4.0) matcher which ignores whitespace and dots?

Question

I want to write a custom select2 (versions 4.0) matcher such that dots and whitespaces are ignored when a search is performed.

Eg. If one of the option is Dr. R. N. Pandey, I should be able to find Dr. R. N. Pandey just by typing rnp in the search box.

can you add some examples? – sharif2008 Sep 05 '16 at 18:47 — sharif2008, Sep 05 '16 at 18:47
Yes, was doing it already. Thanks. – abhishek77in Sep 05 '16 at 18:48 — abhishek77in, Sep 05 '16 at 18:48

sharif2008 · Answer 1 · 2016-09-06T04:03:23.633

Please try this:

HTML:

<select class='select2'>
    <option>Select</option>
    <optgroup label="Vegetables">
        <option>A. Celery</option>
        <option>Green R.P Pepper</option>
        <option>Kale</option>
    </optgroup>
    <optgroup label="Fruits">
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
    </optgroup>
    <optgroup label="Nuts" disabled>
        <option>Almond</option>
        <option>Walnut</option>
        <option>Pine</option>
    </optgroup>
</select>

JS:

(function() {
    function matcher(term, text) {

        term = term.toUpperCase();
        text = text.toUpperCase().replace(/\./g, '').replace(/\s+/g, '');

        if (text.indexOf(term) > -1 ) {
            return true;
        }

        return false;
    }

    $(".select2").select2({
        matcher: matcher
    });
})();

Please have a look from the demo(<4.0):

https://jsfiddle.net/xfw4tmbx/22/

select 2 version 4.0

https://jsfiddle.net/11a998kw/1/

Ok. here is working demo for version 4.0 https://jsfiddle.net/11a998kw/1/ — sharif2008, Sep 06 '16 at 04:02
I have posted a solution inspired by your solution. I find it a bit more simple, I am sure it can be refined further. — abhishek77in, Sep 06 '16 at 05:55
if it fulfills your requirement then most welcome. btw does your solution work for version 4 ? — sharif2008, Sep 06 '16 at 06:34

score 1 · Answer 2 · answered Sep 06 '16 at 05:52

Inspired by answer already provided:

  function ignoreDotAndWhitespace(params, data) {
    params.term = params.term || '';

    term = params.term.toUpperCase();
    text = data.text.toUpperCase().replace(/\./g, '').replace(/\s+/g, '');

    if (text.indexOf(term) > -1 ) {
      return data;
    }
    return false;
  }

  $('.select2').select2({
    matcher: function(params, data) {
      return ignoreDotAndWhitespace(params, data);
    }
  });

How do I write custom select2 (4.0) matcher which ignores whitespace and dots?

2 Answers2