Select2 filter with separate strings-CodePudding

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.

CodePudding user response：

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>