Selectize仅匹配开头字符，与官网示例不符，如何改为包含匹配？

问题原因 #

你使用的Selectize 0.15.2版本默认采用前缀匹配规则——仅显示以输入字符串开头的选项；而官网示例要么使用了更新的版本，要么自定义了匹配逻辑，因此表现出包含匹配的效果。

解决方法 #

要实现包含任意位置字符串的匹配，你可以通过自定义Selectize的匹配逻辑来完成，以下是两种可行方案：

方案1：自定义match函数 #

初始化Selectize时，传入自定义的match函数，让它检查选项文本是否包含输入的过滤字符串（不区分大小写）：

$('#normalize').selectize({
    match: function(text, filter) {
        // 将文本和过滤字符串都转为小写，实现不区分大小写的包含匹配
        return text.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
    }
});

方案2：自定义评分函数（保留前缀匹配优先级） #

如果你希望优先展示前缀匹配的选项，同时补充包含匹配的结果，可以自定义score函数：

$('#normalize').selectize({
    score: function(search) {
        var originalScore = this.getScoreFunction(search);
        return function(item) {
            // 先使用默认的前缀匹配评分，无匹配则检查是否包含目标字符串
            var score = originalScore(item);
            if (score === 0) {
                return item.text.toLowerCase().indexOf(search.toLowerCase()) !== -1 ? 0.5 : 0;
            }
            return score;
        };
    }
});

修改后的完整代码 #

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title> TEST</title>
        <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
          integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer"
        />
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
          integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer"
        ></script>
    </head>
    <body>
      <select id="normalize">
        <option value=""></option>
        <option value="1">Awesome</option>
        <option value="2">Beast</option>
        <option value="3">Compatible</option>
        <option value="4">Thomas Edison</option>
        <option value="5">Nikola</option>
        <option value="6">Selectize</option>
        <option value="7">Javascript</option>
      </select>
      <script>
      $('#normalize').selectize({
          match: function(text, filter) {
              return text.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
          }
      });
      </script> 
    </body>
</html>

效果对比 #

你的原有效果：

修改后效果（与官网示例一致）：

内容的提问来源于stack exchange，提问作者Daniel