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

2024-01-08

我正在使用 selectize.js。目前它看起来像这样:

它不仅显示以“arm”开头的单词,还显示在其他位置包含“arm”作为子字符串的单词(或选项)。

我想强制该函数仅显示以“arm”开头的单词(或选项)。

我检查了使用文档https://github.com/selectize/selectize.js/blob/master/docs/usage.md https://github.com/selectize/selectize.js/blob/master/docs/usage.md但无法弄清楚如何解决这个问题。

有人有什么想法吗?


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

每次输入新字符时都会调用分数函数。 Score 的内部函数然后检查每个项目,这是一个项目的结构。

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

知道这一点我们采取item.text, 将所有字母设为小写(remove .toLowerCase()如果你不想要这个)并将其与值进行比较search (也是小写). When 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐