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:)

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:)

• javascript
• ajax
• jquery-select2-4

• 1 Is anything appearing in your console? Try initializing Select2 with debug: true to see if any warnings show up. – Kevin Brown-Silva Commented Dec 30, 2015 at 20:27

1 Answer 1

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; }
        });