Select2-無限滾動不加載帶有遠程數據的下一頁

Question

我正在使用Select2 4.0.1 ，我已經使用ajax根據用戶輸入來填充結果，但是每當我搜索任何內容時， select2列出第一頁結果，但沒有加載連續的頁面，因此還會滾動請求第二頁。 似乎是我缺少了一些東西。

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

任何幫助都非常感激.Thnx :)

Answer 1

這是我上周工作的代碼。 我最終使用的是其他交通工具，但這不會有所作為。 關於滾動時缺少分頁工作，我遇到了與您相同的問題。 我的問題最終是我的processResults函數中沒有正確的{'pagination':{'more':true}}格式。 我唯一可以看到的對您有用的方法是“固定” data函數與processResults函數中的頁數。

滾動到列表底部時，您是否看到“正在加載更多結果...”標簽？ 您是否嘗試在調試時將more值硬編碼為true ？

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