具有独立字符串的Select2过滤器
具有独立字符串的Select2过滤器
提问于 2021-11-10 16:21:03
在这里或https://select2.org/上找不到任何东西
是否可以使用select2来使用单独的字符串过滤结果？
示例：
选项
- 手机品牌128 Red银
- 手机品牌256 Red黑色
- 手机品牌256 Red黑色
- 手机品牌128 Red红色
<代码>H 110手机品牌256 Red白色<代码>H 211<代码>F 212
手机A品牌的过滤及回传
- 手机品牌128银
- 手机品牌256黑色
- 手机品牌256白色
这样做没有结果，因为字符串不匹配电话品牌128 so。
编辑的：它不需要区分大小写。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-10 20:11:38
使用Matcher函数并拆分搜索字符串：
$(function() {
$(".select2").select2({
matcher: function (params, data) {
if ($.trim(params.term) === '') {
return data;
}
terms=(params.term).split(" ");
for (var i = 0; i < terms.length; i++) {
if (((data.text).toUpperCase()).indexOf((terms[i]).toUpperCase()) == -1)
return null;
}
return data;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select class='select2' style='width:250px'>
<option>Phone Brand 128GB A Silver</option>
<option>Phone Brand 256GB A Black</option>
<option>Phone Brand 256GB Black</option>
<option>Phone Brand 128GB Red</option>
<option>Phone Brand 256GB A White</option>
</select>
如果希望区分大小写，只需删除.toUpperCase()
$(function() {
$(".select2").select2({
matcher: function (params, data) {
if ($.trim(params.term) === '') {
return data;
}
terms=(params.term).split(" ");
for (var i = 0; i < terms.length; i++) {
if (((data.text)).indexOf((terms[i])) == -1)
return null;
}
return data;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select class='select2' style='width:250px'>
<option>Phone Brand 128GB A Silver</option>
<option>Phone Brand 256GB A Black</option>
<option>Phone Brand 256GB Black</option>
<option>Phone Brand 128GB Red</option>
<option>Phone Brand 256GB A White</option>
</select>
编辑：
严格的单词搜索：
$(function() {
$(".select2").select2({
matcher: function (params, data) {
if ($.trim(params.term) === '') {
return data;
}
text=data.text.toUpperCase().split(" ");
terms=params.term.toUpperCase().split(" ").clean('');
count=terms.length;
terms.forEach(function(trm){
text.forEach(function(txt){
if (txt==trm)count--;
});
})
return !count?data:null;
}
});
});
Array.prototype.clean = function(deleteValue) {
for (var i = 0; i < this.length; i++) {
if (this[i] == deleteValue) {
this.splice(i, 1);
i--;
}
}
return this;
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select class='select2' style='width:250px'>
<option>Phone Brand 128GB A Silver</option>
<option>Phone Brand 256GB A Black</option>
<option>Phone Brand 256GB Black</option>
<option>Phone Brand 128GB Red</option>
<option>Phone Brand 256GB A White</option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69916734
复制相关文章
相似问题
腾讯云开发者
