Working on remote data sets

This starts work on the example, which currently uses the GitHub
API.

The `ajax.delay` option has been added that allows for debouncing
requests made within a certain number of milliseconds.

dist/js/select2.amd.full.js

@@ -1211,16 +1211,19 @@ define('select2/data/ajax',[
   function AjaxAdapter ($element, options) {
     this.ajaxOptions = options.get('ajax');
 
-    this.processResults = this.ajaxOptions.processResults ||
+    if (this.ajaxOptions.processResults != null) {
-      function (results) {
+      this.processResults = this.ajaxOptions.processResults;
-        return results;
+    }
-      };
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
 
   Utils.Extend(AjaxAdapter, ArrayAdapter);
 
+  AjaxAdapter.prototype.processResults = function (results) {
+    return results;
+  };
+
   AjaxAdapter.prototype.query = function (params, callback) {
     var matches = [];
     var self = this;
@@ -1237,13 +1240,25 @@ define('select2/data/ajax',[
       options.data = options.data(params);
     }
 
-    var $request = $.ajax(options);
+    function request () {
+      var $request = $.ajax(options);
 
-    $request.success(function (data) {
+      $request.success(function (data) {
-      var results = self.processResults(data);
+        var results = self.processResults(data);
 
-      callback(results);
+        callback(results);
-    });
+      });
+    }
+
+    if (this.ajaxOptions.delay && params.term !== '') {
+      if (this._queryTimeout) {
+        window.clearTimeout(this._queryTimeout);
+      }
+
+      this._queryTimeout = window.setTimeout(request, this.ajaxOptions.delay);
+    } else {
+      request();
+    }
   };
 
   return AjaxAdapter;

dist/js/select2.amd.js

@@ -1211,16 +1211,19 @@ define('select2/data/ajax',[
   function AjaxAdapter ($element, options) {
     this.ajaxOptions = options.get('ajax');
 
-    this.processResults = this.ajaxOptions.processResults ||
+    if (this.ajaxOptions.processResults != null) {
-      function (results) {
+      this.processResults = this.ajaxOptions.processResults;
-        return results;
+    }
-      };
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
 
   Utils.Extend(AjaxAdapter, ArrayAdapter);
 
+  AjaxAdapter.prototype.processResults = function (results) {
+    return results;
+  };
+
   AjaxAdapter.prototype.query = function (params, callback) {
     var matches = [];
     var self = this;
@@ -1237,13 +1240,25 @@ define('select2/data/ajax',[
       options.data = options.data(params);
     }
 
-    var $request = $.ajax(options);
+    function request () {
+      var $request = $.ajax(options);
 
-    $request.success(function (data) {
+      $request.success(function (data) {
-      var results = self.processResults(data);
+        var results = self.processResults(data);
 
-      callback(results);
+        callback(results);
-    });
+      });
+    }
+
+    if (this.ajaxOptions.delay && params.term !== '') {
+      if (this._queryTimeout) {
+        window.clearTimeout(this._queryTimeout);
+      }
+
+      this._queryTimeout = window.setTimeout(request, this.ajaxOptions.delay);
+    } else {
+      request();
+    }
   };
 
   return AjaxAdapter;

dist/js/select2.full.js

@@ -10746,16 +10746,19 @@ define('select2/data/ajax',[
   function AjaxAdapter ($element, options) {
     this.ajaxOptions = options.get('ajax');
 
-    this.processResults = this.ajaxOptions.processResults ||
+    if (this.ajaxOptions.processResults != null) {
-      function (results) {
+      this.processResults = this.ajaxOptions.processResults;
-        return results;
+    }
-      };
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
 
   Utils.Extend(AjaxAdapter, ArrayAdapter);
 
+  AjaxAdapter.prototype.processResults = function (results) {
+    return results;
+  };
+
   AjaxAdapter.prototype.query = function (params, callback) {
     var matches = [];
     var self = this;
@@ -10772,13 +10775,25 @@ define('select2/data/ajax',[
       options.data = options.data(params);
     }
 
-    var $request = $.ajax(options);
+    function request () {
+      var $request = $.ajax(options);
 
-    $request.success(function (data) {
+      $request.success(function (data) {
-      var results = self.processResults(data);
+        var results = self.processResults(data);
 
-      callback(results);
+        callback(results);
-    });
+      });
+    }
+
+    if (this.ajaxOptions.delay && params.term !== '') {
+      if (this._queryTimeout) {
+        window.clearTimeout(this._queryTimeout);
+      }
+
+      this._queryTimeout = window.setTimeout(request, this.ajaxOptions.delay);
+    } else {
+      request();
+    }
   };
 
   return AjaxAdapter;

dist/js/select2.js

@@ -1639,16 +1639,19 @@ define('select2/data/ajax',[
   function AjaxAdapter ($element, options) {
     this.ajaxOptions = options.get('ajax');
 
-    this.processResults = this.ajaxOptions.processResults ||
+    if (this.ajaxOptions.processResults != null) {
-      function (results) {
+      this.processResults = this.ajaxOptions.processResults;
-        return results;
+    }
-      };
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
 
   Utils.Extend(AjaxAdapter, ArrayAdapter);
 
+  AjaxAdapter.prototype.processResults = function (results) {
+    return results;
+  };
+
   AjaxAdapter.prototype.query = function (params, callback) {
     var matches = [];
     var self = this;
@@ -1665,13 +1668,25 @@ define('select2/data/ajax',[
       options.data = options.data(params);
     }
 
-    var $request = $.ajax(options);
+    function request () {
+      var $request = $.ajax(options);
 
-    $request.success(function (data) {
+      $request.success(function (data) {
-      var results = self.processResults(data);
+        var results = self.processResults(data);
 
-      callback(results);
+        callback(results);
-    });
+      });
+    }
+
+    if (this.ajaxOptions.delay && params.term !== '') {
+      if (this._queryTimeout) {
+        window.clearTimeout(this._queryTimeout);
+      }
+
+      this._queryTimeout = window.setTimeout(request, this.ajaxOptions.delay);
+    } else {
+      request();
+    }
   };
 
   return AjaxAdapter;

docs/examples.html

@@ -418,6 +418,8 @@ $.fn.select2.amd.require(["select2/core", "select2/utils"], function (Select2, U
 
   var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
 
+  var $ajax = $(".js-example-data-ajax");
+
   var $disabledResults = $(".js-example-disabled-results");
 
   var $tags = $(".js-example-tags");
@@ -443,6 +445,26 @@ $.fn.select2.amd.require(["select2/core", "select2/utils"], function (Select2, U
     data: data
   });
 
+  $ajax.select2({
+    ajax: {
+      url: "https://api.github.com/search/repositories",
+      dataType: 'json',
+      delay: 250,
+      data: function (params) {
+        return {
+          q: params.term, // search term
+        };
+      },
+      processResults: function (data, page) {
+        // 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;
+      },
+      cache: true
+    }
+  });
+
   $disabledResults.select2();
 
   $(".js-example-programmatic").select2();

src/js/select2/data/ajax.js

@@ -6,16 +6,19 @@ define([
   function AjaxAdapter ($element, options) {
     this.ajaxOptions = options.get('ajax');
 
-    this.processResults = this.ajaxOptions.processResults ||
+    if (this.ajaxOptions.processResults != null) {
-      function (results) {
+      this.processResults = this.ajaxOptions.processResults;
-        return results;
+    }
-      };
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
 
   Utils.Extend(AjaxAdapter, ArrayAdapter);
 
+  AjaxAdapter.prototype.processResults = function (results) {
+    return results;
+  };
+
   AjaxAdapter.prototype.query = function (params, callback) {
     var matches = [];
     var self = this;
@@ -32,13 +35,25 @@ define([
       options.data = options.data(params);
     }
 
-    var $request = $.ajax(options);
+    function request () {
+      var $request = $.ajax(options);
 
-    $request.success(function (data) {
+      $request.success(function (data) {
-      var results = self.processResults(data);
+        var results = self.processResults(data);
 
-      callback(results);
+        callback(results);
-    });
+      });
+    }
+
+    if (this.ajaxOptions.delay && params.term !== '') {
+      if (this._queryTimeout) {
+        window.clearTimeout(this._queryTimeout);
+      }
+
+      this._queryTimeout = window.setTimeout(request, this.ajaxOptions.delay);
+    } else {
+      request();
+    }
   };
 
   return AjaxAdapter;