未捕获的TypeError:无法读取select2中null的属性“ replace”

时间:2019-03-25 11:54:54

标签: javascript ajax jquery-select2

我在节点Express应用中使用grep: /Users/myname/.config/valet/Nginx/myurl*: No such file or directory ,当我提供数组作为数据源select2时,出现错误data: dataBase

我尝试将ajax源用作数据,但可以,但是键入时未过滤数据(在下面将其注释掉)-it appears that matching only works with array data

  

matcher仅适用于本地提供的数据(例如,通过数组!使用远程数据集时,Select2期望返回的结果已在服务器端被过滤。

我现在从Uncaught TypeError: Cannot read property 'replace' of null GET调用:ajax构建一个数组,然后在我的$.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)

我正在使用select2 v4.0.6:

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.1/js/select2.full.js

1 个答案:

答案 0 :(得分:1)

您所告知的部分内容没有问题,也许是您的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>