Select2 Multiselect Dropdown 自定义搜索

Question

我正在尝试修改 select2 多选下拉列表的搜索功能，而不是搜索包含搜索字符的元素，而是搜索以搜索字符开头的元素。我已经参考了 select2 文档，但他们已经声明 -

For multi-select boxes, there is no distinct search control

那么这是否意味着我们没有任何解决方法来修改该功能？

我的要求示例：假设下拉列表包含 4 个元素，即

Australia,Argentina,India,United States

并且如果用户键入 'A' 进行搜索 return 所有四个值，因为所有值都包含 'A'。但我的要求是 return 只有以 'A' 开头的值，例如

Australia and Argentina

如何实现？

Answer 1

您可以使用 matcher 属性要求它使用

修改搜索操作

select2.amd.require(['select2/compat/matcher'], ...)

请注意，此属性仅存在于完整版 select2 (select2.full.js)

function search(term, text) {
  if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
    return true;
  }
 
  return false;
}
 
$.fn.select2.amd.require(['select2/compat/matcher'], function (f) {
  $("select").select2({
    matcher: f(search)
  })
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />

<select multiple style="width:100%;">
  <option>France</option>
  <option>Family</option>
  <option>Freezone</option>
</select>

Fiddle : https://jsfiddle.net/nx1eaLgz/

Select2 Multiselect Dropdown 自定义搜索

Select2 Multiselect Dropdown custom search

javascript

jquery

multi-select

jquery-select2