- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 node express 应用程序中使用 select2
,当我提供数组作为数据源时 data: dataBase
我收到错误 Uncaught TypeError: Cannot读取 null 的属性“替换”
。
我曾尝试使用 ajax 源作为数据,这有效但数据在输入时未被过滤(这在下面被注释掉)- it appears that matching only works with array data :
matcher only works with locally supplied data (e.g., via an array! When a remote data set is used, Select2 expects that the returned results have already been filtered on the server side.
我现在从 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>
关于javascript - 未捕获的类型错误 : Cannot read property 'replace' of null in select2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55337251/
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好? 更好,我的意思是以良好的实践方式。 举例说明: public stati
我正在尝试将脱机计算机记录在文本文件中,以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景?使用 'intercept' 而不是 'try/catch' 的唯一好处是简
我对erlang很陌生,我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求,我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效,我只想返回一
我不知道如何捕获删除按键。我发现在 ASCII 代码表中,它位于 127 位,但是 if (Key = #127) then 却无济于事。 然后我检查了 VK_DELETE 的值,它是 47。尝试使用
我很少在失败时对数据库查询使用唯一的错误消息 我经常使用简短的标准消息,例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我 我正在寻找一种在PDO中全局设置一次try {}和ca
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
我认为这是基本的东西,但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序,如果用户输入负整数,程序应该捕获 IllegalArgumentException 并询问用户
我无法理解 EJBTransactionRolledbackException。 我有实体: @Entity public class MyEntity { @Id @Generate
对于我给自己提出的以下挑战,如果社区的经验给我任何建议,我将不胜感激 - 即,这里有任何关于最佳方法/方向的指示吗? 要求 允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。 我试过这个: try. SELECT * FROM (rtab_name) AS rtab
我知道捕获错误不是一个好的做法,但在这种情况下,这样做很重要。我正在尝试运行一个包含游戏一部分的 jar,但它给了我一个 unsatisfiedlink 错误,但这是有趣的部分:我正在使用这段代码:
我有一个表单页面,当我保存它时,它会覆盖数据库。表单页面中有一个文本框,允许用户输入 4000 个字符,但如果用户输入的字符超过此值,则会出现以下错误: ERROR 15:54:05 Abstrac
我想知道在python中绑定(bind)键的最简单方法 例如,默认的 python 控制台窗口出现并等待,然后在 psuedo -> if key "Y" is pressed: print (
下面是别人写的类。 我面临的问题是,当它进入parse method时与 null as the rawString ,它正在扔NumberFormatException 。 所以我想做的是,我应该捕
我有一个简单的脚本,可以捕获所有鼠标单击,除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它,以便无论用户点击什么,在视频加载、新页面加载等之前,它都会发送我构建的简单 GET 请求?
我有一个带有一些选择列表的表单,当选择某些值时,这些列表将显示/隐藏更多输入字段。 问题是大多数用户都是数据输入人员,因此他们在输入数据时大量使用键盘,并且选择列表的 change 事件仅在焦点离开输
我是一名优秀的程序员,十分优秀!