Added support for on-demand loading of items in Select2. Fixes #5038.

docs/en_US/release_notes_4_17.rst

@@ -18,6 +18,7 @@ Housekeeping
 | `Issue #5017 <https://redmine.postgresql.org/issues/5017>`_ -  Use cheroot as default production server for pgAdmin4.
 | `Issue #5023 <https://redmine.postgresql.org/issues/5023>`_ -  Refactored SQL of Views and Materialized Views.
 | `Issue #5024 <https://redmine.postgresql.org/issues/5024>`_ -  Refactored SQL of Functions and Procedures.
+| `Issue #5038 <https://redmine.postgresql.org/issues/5038>`_ -  Added support for on-demand loading of items in Select2.
 
 Bug fixes
 *********

web/pgadmin/browser/static/js/node.ui.js

@@ -93,6 +93,57 @@ define([
     );
   });
 
+  /* Define on demand loading of dropdown items.
+   * This also requires ajax option of select2 to be set.
+   * The trick is, ajax: {} will also work even if you're actually not
+   * using ajax.
+   */
+  $.fn.select2.amd.define('select2/onDemandDataAdapter', [
+    'select2/utils',
+    'select2/data/select',
+  ], function (Utils, SelectAdapter) {
+
+    function onDemandDataAdapter ($element, options) {
+      this.$element = $element;
+      this.options = options;
+    }
+    Utils.Extend(onDemandDataAdapter, SelectAdapter);
+    onDemandDataAdapter.prototype.query = function (params, callback) {
+      var data = [];
+      var self = this;
+      if (!params.page) {
+        params.page = 1;
+      }
+      var pageSize = 20;
+
+      var $options = this.$element.children();
+      $options.each(function () {
+        var $option = $(this);
+
+        if (!$option.is('option') && !$option.is('optgroup')) {
+          return;
+        }
+
+        var option = self.item($option);
+
+        var matches = self.matches(params, option);
+
+        if (matches !== null) {
+          data.push(matches);
+        }
+      });
+
+      callback({
+        results: data.slice((params.page - 1) * pageSize, params.page * pageSize),
+        pagination: {
+          more: data.length >= params.page * pageSize,
+        },
+      });
+    };
+
+    return onDemandDataAdapter;
+  });
+
   /*
    * NodeAjaxOptionsControl
    *   This control will fetch the options required to render the select

web/pgadmin/static/js/backform.pgadmin.js

@@ -2190,6 +2190,7 @@ define([
         emptyOptions: false,
         preserveSelectionOrder: false,
         isDropdownParent: false,
+        onDemandLoad: true,
       });
 
       // Evaluate the disabled, visible, and required option
@@ -2248,6 +2249,16 @@ define([
         select2Opts.data = data.rawValue;
       }
 
+      /* Set the pgadmin adapter for on demand load.
+       * Setting empty ajax option will enable infinite scrolling.
+       */
+      if(select2Opts.onDemandLoad) {
+        select2Opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter');
+        if(_.isUndefined(select2Opts.ajax)) {
+          select2Opts.ajax = {};
+        }
+      }
+
       this.$sel = this.$el.find('select').select2(select2Opts);
 
       // Add or remove tags from select2 control
@@ -2262,8 +2273,6 @@ define([
             $(this).empty();
           }
         });
-
-
       }
 
       // Select the highlighted item on Tab press.

web/pgadmin/static/js/backgrid.pgadmin.js

@@ -883,6 +883,7 @@ define([
         select2_opts = _.extend({
           openOnEnter: false,
           multiple: false,
+          onDemandLoad: true,
         }, self.defaults.select2,
         (col.select2 || {})
         ),
@@ -943,6 +944,12 @@ define([
         select2_opts['placeholder'] = '';
       }
 
+      if(select2_opts.onDemandLoad) {
+        select2_opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter');
+        if(_.isUndefined(select2_opts.ajax)) {
+          select2_opts.ajax = {};
+        }
+      }
       // Initialize select2 control.
       this.$sel = this.$select.select2(select2_opts);