javascript - 未捕获的类型错误:无法读取 select2 中 null 的属性“替换”
问题描述
我select2
在 node express 应用程序中使用,当我提供一个数组作为数据源时,data: dataBase
我得到了错误Uncaught TypeError: Cannot read property 'replace' of null
。
我尝试使用 ajax 源作为数据,它可以工作,但数据在输入时没有被过滤(这在下面被注释掉) -似乎匹配只适用于数组数据:
matcher 仅适用于本地提供的数据(例如,通过数组!使用远程数据集时,Select2 期望返回的结果已经在服务器端过滤。
我现在正在从ajax
GET 调用构建一个数组:$.getJSON('/api/skills/all')
,然后在我的select2
调用中将其作为数据源提供:
$(document).ready(function() {
// Pre-populate search bar with selected items
var skillsSelect = $('.select2-input');
$.getJSON('/api/skills/user/')
.then(function (selected) {
for(var s of selected){
var option = new Option(s.text, s.id, true, true);
console.log(option)
skillsSelect.append(option).trigger('change.select2');
}
skillsSelect.trigger({
type: 'select2:select',
params: {
data: selected
}
});
})
.catch(function(err){
console.log("$.getJSON('/api/skills/user/') failed " + err)
})
var dataBase=[];
$.getJSON('/api/skills/all')
.done(function(response) {
console.log(".done response: " + JSON.stringify(response))
})
.fail(function(err){
console.log("$.getJSON('/api/skills/all') failed " + err)
})
.then(function(alldata){
$.each(alldata, function(i, skill){
dataBase.push({id: skill._id, text: skill.skill})
})
console.log(".then dataBase: " + JSON.stringify(dataBase));
$('.select2-container')
.select2({
data: dataBase,
placeholder: 'Start typing to add skills...',
width: 'style',
multiple: true,
createTag: function(tag) {
return {
id: tag.term,
text: tag.term.toLowerCase(),
isNew : true
};
},
tags: true,
tokenSeparators: [',', '.']
})
})
});
console.log(".then dataBase: " + JSON.stringify(dataBase));
印刷:
.then dataBase: [
{"id":"5c9742d88aab960fa7ca3d22","text":"perl"},{"id":"5c9742e18aab960fa7ca3d23","text":"python"},{"id":"5c9744b9f042ad10ae6240b7","text":"drinking coffee"},{"id":"5c974be7fdae0712996657a4","text":"communication"},{"id":"5c974df73957e012afdd2591","text":"data analysis"},{"id":"5c979fcdbd5d082e0a5f6930","text":"reading"},{"id":"5c97bdd5500aa73961237dc9","text":"analysis"},{"id":"5c97bea16daa4639b441abe8","text":"writing"}
]
这是错误的堆栈跟踪:
select2.full.js:4928 Uncaught TypeError: Cannot read property 'replace' of null
at stripDiacritics (select2.full.js:4928)
at matcher (select2.full.js:4964)
at DecoratedClass.SelectAdapter.matches (select2.full.js:3411)
at HTMLOptionElement.<anonymous> (select2.full.js:3271)
at Function.each (jquery.js:354)
at jQuery.fn.init.each (jquery.js:189)
at DecoratedClass.SelectAdapter.query (select2.full.js:3262)
at DecoratedClass.Tags.query (select2.full.js:3700)
at DecoratedClass.<anonymous> (select2.full.js:598)
at DecoratedClass.Tokenizer.query (select2.full.js:3803)
这是什么功能:
function stripDiacritics (text) {
// Used 'uni range + named function' from http://jsperf.com/diacritics/18
function match(a) {
return DIACRITICS[a] || a;
}
return text.replace(/[^\u0000-\u007E]/g, match);
}
我正在使用 select2 v4.0.6:
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.1/js/select2.full.js
解决方案
您告知的部分没有问题,可能是您的 jquery 位置或超时,您得到的是空值:
$(document).ready(function() {
var dataBase = [
{"id":"5c9742d88aab960fa7ca3d22","text":"perl"},{"id":"5c9742e18aab960fa7ca3d23","text":"python"},{"id":"5c9744b9f042ad10ae6240b7","text":"drinking coffee"},{"id":"5c974be7fdae0712996657a4","text":"communication"},{"id":"5c974df73957e012afdd2591","text":"data analysis"},{"id":"5c979fcdbd5d082e0a5f6930","text":"reading"},{"id":"5c97bdd5500aa73961237dc9","text":"analysis"},{"id":"5c97bea16daa4639b441abe8","text":"writing"}
];
$('.select2-container').select2(
{
data: dataBase,
placeholder: 'Start typing to add skills...',
width: 'style',
multiple: true,
createTag: function(tag) {
return {
id: tag.term,
text: tag.term.toLowerCase(),
isNew : true
};
},
tags: true,
tokenSeparators: [',', '.']
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.1/js/select2.full.js"></script>
<select class="select2-container" style="width:200px;">
</select>
推荐阅读
- sql - 如何使用您的管理员详细信息登录 psql
- python - 如果长度小于 3,子字符串不会输出任何内容
- c++ - 使用 CUDA 代码编译 MINPACK 库的问题
- python - 不使用烧瓶或 django 的 Python Twilio?
- html - GitHub Pages - 无法加载网页的 CSS
- excel - 如何正确计算excel中的百分比变化?
- python - Flask HTMl中的变量加1
- dynamics-crm - 如何调用自定义工作流活动(c# 代码)以启动休息调用按钮单击 IN Dynamics 365
- autodesk-forge - 工具栏上的按钮是如何激活的?
- python - 无法在 MacOS Big Sur 中从 OpenGL 导入 EGL