带有单独字符串的 Select2 过滤器

Question

在此处找不到任何内容或https://select2.org/

是否可以使用 select2 过滤具有单独字符串的结果？

示例：

选项

Phone 品牌 128GB A 银色
Phone 品牌 256GB A 黑色
Phone 品牌 256GB 黑色
Phone 品牌 128GB 红色
Phone品牌256GB A白

按 Phone 品牌 A 和 return

过滤

Phone 品牌 128GB A 银色
Phone 品牌 256GB A 黑色
Phone品牌256GB A白

这样做没有结果，因为字符串不匹配 Phone Brand 128GB A.

编辑：不需要区分大小写。

Answer 1

使用 Matcher 函数并拆分搜索字符串：

$(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/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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>

如果你想要它区分大小写，只需删除 .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/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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>

编辑：

严格的词搜索：

$(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/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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>

带有单独字符串的 Select2 过滤器

Select2 filter with separate strings

jquery

jquery-select2

jquery-select2-4