Fetching and caching the result in Select2
Solution 1
Select2 load data using ajax with caching in-place.
$("#selIUT").select2({
cacheDataSource: [],
placeholder: "Please enter the name",
query: function(query) {
self = this;
var key = query.term;
var cachedData = self.cacheDataSource[key];
if(cachedData) {
query.callback({results: cachedData.result});
return;
} else {
$.ajax({
url: '/ajax/suggest/',
data: { q : query.term },
dataType: 'json',
type: 'GET',
success: function(data) {
self.cacheDataSource[key] = data;
query.callback({results: data.result});
}
})
}
},
width: '250px',
formatResult: formatResult,
formatSelection: formatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
I hope you find it helpful.
Solution 2
I got caching to work with paging.
query: function (query) {
var id = this.element[0].id;
var term = query.term;
var total = 100;
if (!window.select2cache[id]) {
window.select2cache[id] = {};
}
if (!window.select2cache[id][term]) {
window.select2cache[id][term] = {
results: {
results: [],
more: false
},
pages: 0
};
}
if (window.select2cache[id][term].pages > 0 && query.page === 1) {
query.callback(window.select2cache[id][term].results);
} else {
var page = window.select2cache[id][term].pages + 1;
var vars = {
task: id,
q: term,
page: page,
total: total
};
$.get("./autocomplete.php", vars, function (data) {
var more = (page * total) < data.totalrows;
window.select2cache[id][term].results.results = window.select2cache[id][term].results.results.concat(data.results);
window.select2cache[id][term].results.more = more;
window.select2cache[id][term].pages = page;
query.callback({results: data.results, more: more});
}, "json");
}
}
I use the id
so you can have multiple select2's on the same page and cache them seperately.
Related videos on Youtube
Fizer Khan
Love everyone. Work: https://www.atatus.com Twitter: https://www.twitter.com/fizerkhan Website: http://www.fizerkhan.com Get $10 Digital Ocean credit by signing up with https://m.do.co/c/aafa5a3127cf
Updated on July 08, 2022Comments
-
Fizer Khan over 1 year
My application uses select2 to show list of names which is retrieved through Ajax call. It uses select2 ajax functionalities.
But the problem is that select2 fetches items whenever i type on the select2 input. I dont want to fetch every time user type. I want to fetch items in the initial loading of select2 and then uses same data even if they typing in the select2 input.
How can i achieve this?
PS: I have seen cache flag in Ajax, but i think it does caching the result based on the URL. It does not stop fetching of data when user type on the select2 input.
-
codecraig over 10 yearsFor what it's worth, here's the select2 answer: github.com/ivaynberg/select2/issues/110
-
-
coorasse almost 10 yearsActually you need to replace query.callback({results: data.result}); with query.callback({results: data}); and query.callback({results: cachedData.result}) with query.callback({results: cachedData})
-
Hemant Thorat almost 10 yearscoorasse , I'm adding data.result because my data is in "result" variable. If you are directly returning your result in "data" variable then you code will also work.