select2 搜索与任何位置正则表达式中键入的字母匹配

Question

有没有办法在 select2 中搜索任何匹配的字母？

例如，如果我有以下选项：

<option value="MANGO">MANGO</option>
<option value="ORANGE">ORANGE</option>
<option value="APPLE">APPLE</option>

如果我输入 "mngo"，有没有办法在搜索结果中显示 "MANGO" 选项？

Answer 1

正则表达式很清楚，它在每个字符之间以及所有字符前后添加一个.*。您可以随意更改该通配符。

我试着尽可能不冗长，这样做很棘手也很有趣。

$('#select2').select2({
  matcher: function(term, text) {
    // If search is empty we return everything
    if ($.trim(term.term) === '') return text;

    // Compose the regex
    var regex_text = '.*';
    regex_text += (term.term).split('').join('.*');
    regex_text += '.*'

    // Case insensitive
    var regex = new RegExp(regex_text, "i");

    // If no match is found we return nothing
    if (!regex.test(text.text)) {
      return null;
    }

    // Else we return everything that is matching
    return text;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<select id="select2" style="width:100%;">
  <option value="MANGO">MANGO</option>
  <option value="ORANGE">ORANGE</option>
  <option value="APPLE">APPLE</option>
</select>

select2 搜索与任何位置正则表达式中键入的字母匹配

select2 search match with typed letter in any position regex

html

javascript

regex

jquery

jquery-select2