Select2 - 無限滾動無法加載下一頁與遠程數據

Question

我使用Select2 4.0.1，我已經使用ajax填充基於用戶輸入的結果，但每當我搜索任何東西select2列出第一頁結果，但連續頁面未加載，也請求第2頁滾動。似乎是我失去了一些東西。

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

任何幫助是非常appreciated.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; } 
     });