javascript - 强制 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>