Fetching and caching the result in Select2

Question

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.

Enterprise

Probably easier to put all available options inside a <select> and use the non-ajax version I'd say. – Drawn

For what it's worth, here's the select2 answer: github.com/ivaynberg/select2/issues/110 – Ma

Updated link for codecraig comment: github.com/select2/select2/issues/110 – Chattel

Answer 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.

Uracil

Actually 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}) – Logogriph

coorasse , 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. – Uracil

Answer 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.

Brodie