Fetching and caching the result in Select2

13,767

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.

Share:
13,767

Related videos on Youtube

Fizer Khan
Author by

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, 2022

Comments

  • Fizer Khan
    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.

  • coorasse
    coorasse almost 10 years
    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})
  • Hemant Thorat
    Hemant Thorat almost 10 years
    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.

Related