In my Node Express app, I am incorporating select2, and encountering an error when supplying an array as the data source with data: dataBase. The issue arises as
Uncaught TypeError: Cannot read property 'replace' of nullAlthough using an ajax source for data works, it does not filter the data upon typing. As mentioned here, matching only functions effectively with array data:
The matcher feature can only be used with locally provided data (e.g., via an array). When a remote dataset is utilized, Select2 assumes that the returned results have been pre-filtered on the server side.
To address this, I'm now constructing an array from the ajax GET call: $.getJSON('/api/skills/all'), and then utilizing this as the datasource in my select2 setup:
$(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: [',', '.']
})
})
});
Upon running
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":"5c979fcdbd5d082e0a...etc.
]
The stack trace of the error is as follows:
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)
This error traces back to the function defined below:
function stripDiacritics (text) {
// Utilized 'uni range + named function' from http://jsperf.com/diacritics/18
function match(a) {
return DIACRITICS[a] || a;
}
return text.replace(/[^\u0000-\u007E]/g, match);
}
The version of select2 being used is v4.0.6:
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.1/js/select2.full.js