CODEWITHSUNDEEP
javascriptajaxjquery-select2-4
Sampat Badhe
Sampat Badhe

Reputation: 9085

Select2 - infinite scroll not loading next page with remote data

I am using Select2 4.0.1, I have used ajax to populate the result based on users input, but whenever I search for anything select2 lists first page result, but consecutive pages were not loading, also request is made for 2nd page on scroll. seems to be I am missing something. 

$multiselect = $(element).select2({
    closeOnSelect: false,
    multiple: true,
    placeholder: 'Assign a new tag',
    tags: true,
    tokenSeparators: [","],
    ajax: {
      url: '/search_url',
      dataType: 'json',
      type: 'GET',
      delay: 250,
      data: function(params) {
        return {
          search: params.term,
          page: params.page
        };
      },
      processResults: function(data, params) {
        var more, new_data;
        params.page = params.page || 1;
        more = {
          more: (params.page * 20) < data.total_count
        };
        new_data = [];
        data.items.forEach(function(i, item) {
          new_data.push({
            id: i.name,
            text: i.name
          });
        });
        return {
          pagination: more,
          results: new_data
        };
      },
      cache: true
    }
  })

Any help is much appreciated.Thnx:)

Upvotes: 5

Views: 8870

Answers (1)

Justin Heath
Justin Heath

Reputation: 401

This is the code I got working last week. I am using a different transport on my end, but that shouldn't make a difference. I was having the same issue as you regarding the lack of paging working while scrolling. My issue ended up being that I didn't have the proper {'pagination':{'more':true}} format in my processResults function. The only thing I can see that may work for you is to "fix" the page count in the data function vs. the processResults function.

When you scroll to the bottom of your list, do you see the "Loading more results..." label? Have you attempted to hard code the more value to true while debugging?

        this.$(".select2").select2({
            'ajax': {
                'transport': function (params, success, failure) {
                    var page = (params.data && params.data.page) || 1;
                    app.do('entity:list:search',{'types':['locations'],'branch':branch,'limit':100,'page':page,'term':params.data.term})
                    .done(function(locations) {
                        success({'results':locations,'more':(locations.length>=100)});
                    });
                }
              , 'delay': 250
              , 'data':function (params) {
                    var query = {
                        'term': params.term
                      , 'page': params.page || 1
                    };

                    return query;
                }
              , 'processResults': function (data) {
                    return {
                        'results': data.results
                      , 'pagination': {
                            'more': data.more
                        }
                    };
                }
            }
          , 'templateResult': that.formatResult
          , 'templateSelection': that.formatSelection
          , 'escapeMarkup': function(m) { return m; }
        });

Upvotes: 7

Related Questions