Select2 filter with separate strings

Question

Cannot find anything on here or https://select2.org/

Is it possible using select2 to filter results with separate strings?

Example:

Options

Phone Brand 128GB A Silver
Phone Brand 256GB A Black
Phone Brand 256GB Black
Phone Brand 128GB Red
Phone Brand 256GB A White

Filter by Phone Brand A and return

Phone Brand 128GB A Silver
Phone Brand 256GB A Black
Phone Brand 256GB A White

Doing so results in no results because the string did not match Phone Brand 128GB A.

Edited: it does not need to be case-sensitive.

Abelucho · Accepted Answer · 2021-11-11 19:30:44Z

0

Use the Matcher function and split the search string:

$(function() {
  $(".select2").select2({
        matcher: function (params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }

            terms=(params.term).split(" ");

            for (var i = 0; i < terms.length; i++) {
                if (((data.text).toUpperCase()).indexOf((terms[i]).toUpperCase()) == -1) 
                return null;
            }
            return data;
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<select class='select2' style='width:250px'>
  <option>Phone Brand 128GB A Silver</option>
  <option>Phone Brand 256GB A Black</option>
  <option>Phone Brand 256GB Black</option>
  <option>Phone Brand 128GB Red</option>
  <option>Phone Brand 256GB A White</option>
</select>

If you want it case sensitive, just delete the .toUpperCase()

$(function() {
  $(".select2").select2({
        matcher: function (params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }

            terms=(params.term).split(" ");

            for (var i = 0; i < terms.length; i++) {
                if (((data.text)).indexOf((terms[i])) == -1) 
                return null;
            }
            return data;
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<select class='select2' style='width:250px'>
  <option>Phone Brand 128GB A Silver</option>
  <option>Phone Brand 256GB A Black</option>
  <option>Phone Brand 256GB Black</option>
  <option>Phone Brand 128GB Red</option>
  <option>Phone Brand 256GB A White</option>
</select>

EDIT:

Strict word search:

$(function() {
  $(".select2").select2({
        matcher: function (params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }

            text=data.text.toUpperCase().split(" ");
            terms=params.term.toUpperCase().split(" ").clean('');
            count=terms.length;
            terms.forEach(function(trm){
              text.forEach(function(txt){
                if (txt==trm)count--;
              });
            })
            return !count?data:null;
            
        }
    });
});

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<select class='select2' style='width:250px'>
  <option>Phone Brand 128GB A Silver</option>
  <option>Phone Brand 256GB A Black</option>
  <option>Phone Brand 256GB Black</option>
  <option>Phone Brand 128GB Red</option>
  <option>Phone Brand 256GB A White</option>
</select>

edited Nov 11, 2021 at 19:30

answered Nov 10, 2021 at 20:11

Abelucho

2401 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LoekGenbu Over a year ago

Thanks for the reply, your first answer isn't filtering with either "Phone Brand A" or "phone brand a". However, your second one is with "Phone Brand A" and that is what I want it to do except without case sensitivity. You're very close and I didn't quite understand how to use the matcher at first so that helps a lot.

Abelucho Over a year ago

Thats because when you search "Phone Brand A" without case sensitive, the "A" matchs with Brand and Black, unless u want a very strict word seach.

Abelucho Over a year ago

Edited and adden a strict word search. You can search "Phone Brand A", "phone brand a" or disordered like "Brand A Phone". But if you put "Bran" instead of "Brand", no results are given.

LoekGenbu Over a year ago

I realized this after my comment. All three are good examples to use when needed.

Collectives™ on Stack Overflow

Select2 filter with separate strings

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related