强制selectize.js仅显示以用户输入开头的选项

Question

我正在使用selectize.js。当前看起来像这样：

它不仅显示以'arm'开头的单词，而且还显示包含'arm'作为其他子字符串的单词（或选项）。

我想强制该功能仅显示以“ arm”开头的单词（或选项）。

我在https://github.com/selectize/selectize.js/blob/master/docs/usage.md处查看了使用文档，但无法找出解决方法。

有人有什么主意吗？

Answer 1

您可以使用score属性，该属性循环遍历整个列表并对项目进行排序。 1是最相关的，0被认为是不匹配的，并且该项目被排除在外。知道了这一点，我们就可以编写我们自己的函数了：）

每次输入新字符时都会调用得分功能。然后，score的内部功能会检查每个项目，这是项目的结构。

item = {
  text: 'Armband',
  value: 'Armband',
}

知道这一点后，我们将item.text设为小写（如果不希望，请删除.toLowerCase()），并将其与值search进行比较（也是小写）。当item.text以search中的值开头时，则返回1-应该包括项目-否则为0，并且该项目从列表中排除。这是score的全部功能。

score: function(search) {
  var score = this.getScoreFunction(search);
  return function(item) {
    return item.text
      .toLowerCase()
      .startsWith(search.toLowerCase()) ? 1 : 0;
  };
},

下面是一个实际的示例，可以看到它的实际效果。

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(search, pos) {
    return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
  };
}

$('.select').selectize({
  placeholder: 'Maak een keuze',
  openOnFocus: true,
  items: [''],
  score: function(search) {
    var score = this.getScoreFunction(search);
    return function(item) {
      return item.text
        .toLowerCase()
        .startsWith(search.toLowerCase()) ? 1 : 0;
    };
  },
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js">
</script>

<select class="select" selected="">
  <option>Arm</option>
  <option>Armoede</option>
  <option>Armband</option>
  <option>Edeldarm</option>
  <option>Warmbloedig</option>
  <option>Opgewarmd</option>
</select>