I am doing some experiment using select2 js plugin inside a Vue js component, my mount() function looks like this
let self = this;
let url = self.context.recipes_autocomplete_url;
$(this.$refs.recipe_selection).select2({
minimumInputLength: 2,
ajax: {
dataType: 'json',
delay: 250,
cache: true,
url: function (params) {
return url;
},
data: function (params) {
let query = {
term: params.term
}
return query;
},
processResults: function (data, params) {
let more = (data.next != null)
if (more)
url = data.next;
else
url = self.context.recipes_autocomplete_url;
return {
results: data.results,
pagination: {
more: true
}
};
}
}
}).on("change.select2", function (e) {
let data = $(self.$refs.recipe_selection).select2('data')
if (data.length == 0)
return
// more staff here
});
My problem is with pagination, even if I hard code pagination:{more: true} the call to the next page never happen, I know this is not a common usage, but I am working on a legacy code, any idea?
I am using the last version of select2.js