Added pagination support for AJAX results

I'm still not quite sure how this should be handled for the general
case, but for the special case we have this for infinite scrolling,
only on AJAX data.

dist/js/select2.amd.full.js

@@ -2494,7 +2494,7 @@ define('select2/data/ajax',[
       var $request = $.ajax(options);
 
       $request.success(function (data) {
-        var results = self.processResults(data);
+        var results = self.processResults(data, params);
 
         callback(results);
       });
@@ -2860,14 +2860,18 @@ define('select2/dropdown/infiniteScroll',[
 
   InfiniteScroll.prototype.append = function (decorated, data) {
     this.$loadingMore.remove();
+    this.loading = false;
 
-    decorated.call(this, data);
+    if ($.isArray(data)) {
+      decorated.call(this, data);
+      return;
+    }
+
+    decorated.call(this, data.results);
 
-    if (data.length > 0) {
+    if (this.showLoadingMore(data)) {
       this.$results.append(this.$loadingMore);
     }
-
-    this.loading = false;
   };
 
   InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -2886,12 +2890,12 @@ define('select2/dropdown/infiniteScroll',[
     });
 
     this.$results.on('scroll', function () {
-      var loadMoreVisible = $.contains(
+      var isLoadMoreVisible = $.contains(
         document.documentElement,
         self.$loadingMore[0]
       );
 
-      if (self.loading || !loadMoreVisible) {
+      if (self.loading || !isLoadMoreVisible) {
         return;
       }
 
@@ -2916,6 +2920,10 @@ define('select2/dropdown/infiniteScroll',[
     this.trigger('query:append', params);
   };
 
+  InfiniteScroll.prototype.showLoadingMore = function (_, data) {
+    return data.pagination && data.pagination.more;
+  };
+
   InfiniteScroll.prototype.createLoadingMore = function () {
     var $option = $(
       '<li class="option load-more" role="treeitem"></li>'

dist/js/select2.amd.js

@@ -2494,7 +2494,7 @@ define('select2/data/ajax',[
       var $request = $.ajax(options);
 
       $request.success(function (data) {
-        var results = self.processResults(data);
+        var results = self.processResults(data, params);
 
         callback(results);
       });
@@ -2860,14 +2860,18 @@ define('select2/dropdown/infiniteScroll',[
 
   InfiniteScroll.prototype.append = function (decorated, data) {
     this.$loadingMore.remove();
+    this.loading = false;
 
-    decorated.call(this, data);
+    if ($.isArray(data)) {
+      decorated.call(this, data);
+      return;
+    }
+
+    decorated.call(this, data.results);
 
-    if (data.length > 0) {
+    if (this.showLoadingMore(data)) {
       this.$results.append(this.$loadingMore);
     }
-
-    this.loading = false;
   };
 
   InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -2886,12 +2890,12 @@ define('select2/dropdown/infiniteScroll',[
     });
 
     this.$results.on('scroll', function () {
-      var loadMoreVisible = $.contains(
+      var isLoadMoreVisible = $.contains(
         document.documentElement,
         self.$loadingMore[0]
       );
 
-      if (self.loading || !loadMoreVisible) {
+      if (self.loading || !isLoadMoreVisible) {
         return;
       }
 
@@ -2916,6 +2920,10 @@ define('select2/dropdown/infiniteScroll',[
     this.trigger('query:append', params);
   };
 
+  InfiniteScroll.prototype.showLoadingMore = function (_, data) {
+    return data.pagination && data.pagination.more;
+  };
+
   InfiniteScroll.prototype.createLoadingMore = function () {
     var $option = $(
       '<li class="option load-more" role="treeitem"></li>'

dist/js/select2.full.js

@@ -12029,7 +12029,7 @@ define('select2/data/ajax',[
       var $request = $.ajax(options);
 
       $request.success(function (data) {
-        var results = self.processResults(data);
+        var results = self.processResults(data, params);
 
         callback(results);
       });
@@ -12395,14 +12395,18 @@ define('select2/dropdown/infiniteScroll',[
 
   InfiniteScroll.prototype.append = function (decorated, data) {
     this.$loadingMore.remove();
+    this.loading = false;
 
-    decorated.call(this, data);
+    if ($.isArray(data)) {
+      decorated.call(this, data);
+      return;
+    }
+
+    decorated.call(this, data.results);
 
-    if (data.length > 0) {
+    if (this.showLoadingMore(data)) {
       this.$results.append(this.$loadingMore);
     }
-
-    this.loading = false;
   };
 
   InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -12421,12 +12425,12 @@ define('select2/dropdown/infiniteScroll',[
     });
 
     this.$results.on('scroll', function () {
-      var loadMoreVisible = $.contains(
+      var isLoadMoreVisible = $.contains(
         document.documentElement,
         self.$loadingMore[0]
       );
 
-      if (self.loading || !loadMoreVisible) {
+      if (self.loading || !isLoadMoreVisible) {
         return;
       }
 
@@ -12451,6 +12455,10 @@ define('select2/dropdown/infiniteScroll',[
     this.trigger('query:append', params);
   };
 
+  InfiniteScroll.prototype.showLoadingMore = function (_, data) {
+    return data.pagination && data.pagination.more;
+  };
+
   InfiniteScroll.prototype.createLoadingMore = function () {
     var $option = $(
       '<li class="option load-more" role="treeitem"></li>'

dist/js/select2.js

@@ -2922,7 +2922,7 @@ define('select2/data/ajax',[
       var $request = $.ajax(options);
 
       $request.success(function (data) {
-        var results = self.processResults(data);
+        var results = self.processResults(data, params);
 
         callback(results);
       });
@@ -3288,14 +3288,18 @@ define('select2/dropdown/infiniteScroll',[
 
   InfiniteScroll.prototype.append = function (decorated, data) {
     this.$loadingMore.remove();
+    this.loading = false;
 
-    decorated.call(this, data);
+    if ($.isArray(data)) {
+      decorated.call(this, data);
+      return;
+    }
+
+    decorated.call(this, data.results);
 
-    if (data.length > 0) {
+    if (this.showLoadingMore(data)) {
       this.$results.append(this.$loadingMore);
     }
-
-    this.loading = false;
   };
 
   InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -3314,12 +3318,12 @@ define('select2/dropdown/infiniteScroll',[
     });
 
     this.$results.on('scroll', function () {
-      var loadMoreVisible = $.contains(
+      var isLoadMoreVisible = $.contains(
         document.documentElement,
         self.$loadingMore[0]
       );
 
-      if (self.loading || !loadMoreVisible) {
+      if (self.loading || !isLoadMoreVisible) {
         return;
       }
 
@@ -3344,6 +3348,10 @@ define('select2/dropdown/infiniteScroll',[
     this.trigger('query:append', params);
   };
 
+  InfiniteScroll.prototype.showLoadingMore = function (_, data) {
+    return data.pagination && data.pagination.more;
+  };
+
   InfiniteScroll.prototype.createLoadingMore = function () {
     var $option = $(
       '<li class="option load-more" role="treeitem"></li>'

docs/examples.html

@@ -745,11 +745,19 @@ $.fn.select2.amd.require(
           page: params.page
         };
       },
-      processResults: function (data, page) {
-        // parse the results into the format expected by Select2.
+      processResults: function (data, params) {
+        // parse the results into the format expected by Select2
         // since we are using custom formatting functions we do not need to
-        // alter the remote JSON data
-        return data.items;
+        // alter the remote JSON data, except to indicate that infinite
+        // scrolling can be used
+        params.page = params.page || 1;
+
+        return {
+          results: data.items,
+          pagination: {
+            more: (params.page * 30) < data.total_count
+          }
+        };
       },
       cache: true
     },

src/js/select2/data/ajax.js

@@ -44,7 +44,7 @@ define([
       var $request = $.ajax(options);
 
       $request.success(function (data) {
-        var results = self.processResults(data);
+        var results = self.processResults(data, params);
 
         callback(results);
       });

src/js/select2/dropdown/infiniteScroll.js

@@ -12,14 +12,18 @@ define([
 
   InfiniteScroll.prototype.append = function (decorated, data) {
     this.$loadingMore.remove();
+    this.loading = false;
+
+    if ($.isArray(data)) {
+      decorated.call(this, data);
+      return;
+    }
 
-    decorated.call(this, data);
+    decorated.call(this, data.results);
 
-    if (data.length > 0) {
+    if (this.showLoadingMore(data)) {
       this.$results.append(this.$loadingMore);
     }
-
-    this.loading = false;
   };
 
   InfiniteScroll.prototype.bind = function (decorated, container, $container) {
@@ -38,12 +42,12 @@ define([
     });
 
     this.$results.on('scroll', function () {
-      var loadMoreVisible = $.contains(
+      var isLoadMoreVisible = $.contains(
         document.documentElement,
         self.$loadingMore[0]
       );
 
-      if (self.loading || !loadMoreVisible) {
+      if (self.loading || !isLoadMoreVisible) {
         return;
       }
 
@@ -68,6 +72,10 @@ define([
     this.trigger('query:append', params);
   };
 
+  InfiniteScroll.prototype.showLoadingMore = function (_, data) {
+    return data.pagination && data.pagination.more;
+  };
+
   InfiniteScroll.prototype.createLoadingMore = function () {
     var $option = $(
       '<li class="option load-more" role="treeitem"></li>'