强制 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 中的值开头时，则 return 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>

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

force selectize.js only to show options that start with user input

javascript

user-interface

selectize.js