jquery editable ajax,jquery - Xeditable Select2 Ajax Call Not Working Properly - Stack Overflow

I try to build Xeditable Select2 Ajax Multiple Select Options but I got following error in console.

My Select2 version is 4.0.3

My Xeditable version is 1.5.1

Error:

jQuery.Deferred exception: Cannot read property 'slice' of undefined TypeError: Cannot read property 'slice' of undefined

at d.a.removePlaceholder (http://www.aa.lk/js/select2.min.js:2:10575)

at d.j [as removePlaceholder] (http://www.aa.lk/js/select2.min.js:1:4456)

at d.a.append (http://www.aa.lk/js/select2.min.js:2:10380)

at d.j [as append] (http://www.aa.lk/js/select2.min.js:1:4456)

at e. (http://www.aa.lk/js/select2.min.js:1:9378)

at e.d.invoke (http://www.aa.lk/js/select2.min.js:1:5094)

at e.d.trigger (http://www.aa.lk/js/select2.min.js:1:4913)

at e.trigger (http://www.aa.lk/js/select2.min.js:2:29479)

at http://www.aa.lk/js/select2.min.js:2:27951

at Object.f.transport.d.status.0.d.status.e.trigger.message (http://www.aa.lk/js/select2.min.js:2:4227) undefined

Javascript Code:

$.fn.editable.defaults.mode = 'inline';

$('#country').editable({

select2: {

placeholder: 'Select a Requester',

multiple: true,

id: function (item) {

return item.id;

},

ajax: {

url: '/php/friendtag.php',

dataType: 'json',

data: function (term, page) {

return { query: term };

},

results: function (data, page) {

return { results: data };

}

},

templateResult: function (item) {

return item.text;

},

templateSelection : function (item) {

return item.text;

},

current: function (item, callback) {

return $.get('/php/friendtag.php', { query: item.val() }, function (data) {

callback(data);

}, 'json'); //added dataType

}

},

tpl:'',

emptytext: 'Empty Friends'

});

HTML Code:

How to solve this problem?

This is Ajax Result:

[{"id":"5","text":"dvd"},{"id":"2","text":"aa"},{"id":"3","text":"bb"},{"id":"6","text":"dd"}]