我正在使用 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(使用前将#替换为@)