Added very basic AJAX adapter

dist/js/select2.amd.full.js

@@ -568,7 +568,6 @@ define('select2/data/array',[
 ], function (SelectAdapter, Utils) {
   function ArrayAdapter ($element, options) {
     this.data = options.options.data;
-    this.selection = [];
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
@@ -622,6 +621,54 @@ define('select2/data/array',[
   return ArrayAdapter;
 });
 
+define('select2/data/ajax',[
+  "./array",
+  "../utils",
+  "jquery"
+], function (ArrayAdapter, Utils, $) {
+  function AjaxAdapter ($element, options) {
+    this.ajaxOptions = options.options.ajax;
+
+    this.processResults = this.ajaxOptions.processResults ||
+      function (results) {
+        return results
+      };
+
+    ArrayAdapter.__super__.constructor.call(this, $element, options);
+  }
+
+  Utils.Extend(AjaxAdapter, ArrayAdapter);
+
+  AjaxAdapter.prototype.query = function (params, callback) {
+    var matches = [];
+    var self = this;
+
+    var options = $.extend({
+      type: "GET",
+    }, this.ajaxOptions);
+
+    if (typeof options.url === "function") {
+      options.url = options.url(params);
+    }
+
+    if (typeof options.data === "function") {
+      options.data = options.data(params);
+    }
+
+    var $request = $.ajax(options);
+
+    $request.success(function (data) {
+      var results = self.processResults(data);
+
+      console.log(results)
+
+      callback(results);
+    });
+  };
+
+  return AjaxAdapter;
+});
+
 define('select2/options',[
   './data/select',
   './results',
@@ -629,7 +676,8 @@ define('select2/options',[
   './selection/single',
   './selection/multiple',
 
-  './data/array'
+  './data/array',
+  './data/ajax'
 ], function (SelectData, ResultsList, Dropdown, SingleSelection,
              MultipleSelection) {
   function Options (options) {

dist/js/select2.amd.js

@@ -568,7 +568,6 @@ define('select2/data/array',[
 ], function (SelectAdapter, Utils) {
   function ArrayAdapter ($element, options) {
     this.data = options.options.data;
-    this.selection = [];
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
@@ -622,6 +621,54 @@ define('select2/data/array',[
   return ArrayAdapter;
 });
 
+define('select2/data/ajax',[
+  "./array",
+  "../utils",
+  "jquery"
+], function (ArrayAdapter, Utils, $) {
+  function AjaxAdapter ($element, options) {
+    this.ajaxOptions = options.options.ajax;
+
+    this.processResults = this.ajaxOptions.processResults ||
+      function (results) {
+        return results
+      };
+
+    ArrayAdapter.__super__.constructor.call(this, $element, options);
+  }
+
+  Utils.Extend(AjaxAdapter, ArrayAdapter);
+
+  AjaxAdapter.prototype.query = function (params, callback) {
+    var matches = [];
+    var self = this;
+
+    var options = $.extend({
+      type: "GET",
+    }, this.ajaxOptions);
+
+    if (typeof options.url === "function") {
+      options.url = options.url(params);
+    }
+
+    if (typeof options.data === "function") {
+      options.data = options.data(params);
+    }
+
+    var $request = $.ajax(options);
+
+    $request.success(function (data) {
+      var results = self.processResults(data);
+
+      console.log(results)
+
+      callback(results);
+    });
+  };
+
+  return AjaxAdapter;
+});
+
 define('select2/options',[
   './data/select',
   './results',
@@ -629,7 +676,8 @@ define('select2/options',[
   './selection/single',
   './selection/multiple',
 
-  './data/array'
+  './data/array',
+  './data/ajax'
 ], function (SelectData, ResultsList, Dropdown, SingleSelection,
              MultipleSelection) {
   function Options (options) {

dist/js/select2.full.js

@@ -10105,7 +10105,6 @@ define('select2/data/array',[
 ], function (SelectAdapter, Utils) {
   function ArrayAdapter ($element, options) {
     this.data = options.options.data;
-    this.selection = [];
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
@@ -10159,6 +10158,54 @@ define('select2/data/array',[
   return ArrayAdapter;
 });
 
+define('select2/data/ajax',[
+  "./array",
+  "../utils",
+  "jquery"
+], function (ArrayAdapter, Utils, $) {
+  function AjaxAdapter ($element, options) {
+    this.ajaxOptions = options.options.ajax;
+
+    this.processResults = this.ajaxOptions.processResults ||
+      function (results) {
+        return results
+      };
+
+    ArrayAdapter.__super__.constructor.call(this, $element, options);
+  }
+
+  Utils.Extend(AjaxAdapter, ArrayAdapter);
+
+  AjaxAdapter.prototype.query = function (params, callback) {
+    var matches = [];
+    var self = this;
+
+    var options = $.extend({
+      type: "GET",
+    }, this.ajaxOptions);
+
+    if (typeof options.url === "function") {
+      options.url = options.url(params);
+    }
+
+    if (typeof options.data === "function") {
+      options.data = options.data(params);
+    }
+
+    var $request = $.ajax(options);
+
+    $request.success(function (data) {
+      var results = self.processResults(data);
+
+      console.log(results)
+
+      callback(results);
+    });
+  };
+
+  return AjaxAdapter;
+});
+
 define('select2/options',[
   './data/select',
   './results',
@@ -10166,7 +10213,8 @@ define('select2/options',[
   './selection/single',
   './selection/multiple',
 
-  './data/array'
+  './data/array',
+  './data/ajax'
 ], function (SelectData, ResultsList, Dropdown, SingleSelection,
              MultipleSelection) {
   function Options (options) {

dist/js/select2.js

@@ -996,7 +996,6 @@ define('select2/data/array',[
 ], function (SelectAdapter, Utils) {
   function ArrayAdapter ($element, options) {
     this.data = options.options.data;
-    this.selection = [];
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }
@@ -1050,6 +1049,54 @@ define('select2/data/array',[
   return ArrayAdapter;
 });
 
+define('select2/data/ajax',[
+  "./array",
+  "../utils",
+  "jquery"
+], function (ArrayAdapter, Utils, $) {
+  function AjaxAdapter ($element, options) {
+    this.ajaxOptions = options.options.ajax;
+
+    this.processResults = this.ajaxOptions.processResults ||
+      function (results) {
+        return results
+      };
+
+    ArrayAdapter.__super__.constructor.call(this, $element, options);
+  }
+
+  Utils.Extend(AjaxAdapter, ArrayAdapter);
+
+  AjaxAdapter.prototype.query = function (params, callback) {
+    var matches = [];
+    var self = this;
+
+    var options = $.extend({
+      type: "GET",
+    }, this.ajaxOptions);
+
+    if (typeof options.url === "function") {
+      options.url = options.url(params);
+    }
+
+    if (typeof options.data === "function") {
+      options.data = options.data(params);
+    }
+
+    var $request = $.ajax(options);
+
+    $request.success(function (data) {
+      var results = self.processResults(data);
+
+      console.log(results)
+
+      callback(results);
+    });
+  };
+
+  return AjaxAdapter;
+});
+
 define('select2/options',[
   './data/select',
   './results',
@@ -1057,7 +1104,8 @@ define('select2/options',[
   './selection/single',
   './selection/multiple',
 
-  './data/array'
+  './data/array',
+  './data/ajax'
 ], function (SelectData, ResultsList, Dropdown, SingleSelection,
              MultipleSelection) {
   function Options (options) {

playground/basic/adapters.html

@@ -20,61 +20,15 @@
 
 <br />
 
-<select style="width:300px" id="single-multiple">
-    <option value="AK">Alaska</option>
-    <option value="HI">Hawaii</option>
-    <option value="CA">California</option>
-    <option value="NV">Nevada</option>
-    <option value="OR">Oregon</option>
-    <option value="WA">Washington</option>
-    <option value="AZ">Arizona</option>
-    <option value="CO">Colorado</option>
-    <option value="ID">Idaho</option>
-    <option value="MT">Montana</option>
-    <option value="NE">Nebraska</option>
-    <option value="NM">New Mexico</option>
-    <option value="ND">North Dakota</option>
-    <option value="UT">Utah</option>
-    <option value="WY">Wyoming</option>
-    <option value="AL">Alabama</option>
-    <option value="AR">Arkansas</option>
-    <option value="IL">Illinois</option>
-    <option value="IA">Iowa</option>
-    <option value="KS">Kansas</option>
-    <option value="KY">Kentucky</option>
-    <option value="LA">Louisiana</option>
-    <option value="MN">Minnesota</option>
-    <option value="MS">Mississippi</option>
-    <option value="MO">Missouri</option>
-    <option value="OK">Oklahoma</option>
-    <option value="SD">South Dakota</option>
-    <option value="TX">Texas</option>
-    <option value="TN">Tennessee</option>
-    <option value="WI">Wisconsin</option>
-    <option value="CT">Connecticut</option>
-    <option value="DE">Delaware</option>
-    <option value="FL">Florida</option>
-    <option value="GA">Georgia</option>
-    <option value="IN">Indiana</option>
-    <option value="ME">Maine</option>
-    <option value="MD">Maryland</option>
-    <option value="MA">Massachusetts</option>
-    <option value="MI">Michigan</option>
-    <option value="NH">New Hampshire</option>
-    <option value="NJ">New Jersey</option>
-    <option value="NY">New York</option>
-    <option value="NC">North Carolina</option>
-    <option value="OH">Ohio</option>
-    <option value="PA">Pennsylvania</option>
-    <option value="RI">Rhode Island</option>
-    <option value="SC">South Carolina</option>
-    <option value="VT">Vermont</option>
-    <option value="VA">Virginia</option>
-    <option value="WV">West Virginia</option>
-</select>
+<select style="width:300px" id="remote-single"></select>
+
+<br />
+
+<select style="width:300px" id="remote-multiple" multiple="multiple"></select>
 
 <script>
-require(["select2/core", "select2/data/array"], function (Select2, ArrayAdapter) {
+require(["select2/core", "select2/data/array", "select2/data/ajax"],
+        function (Select2, ArrayAdapter, AjaxAdapter) {
     var arrayData = [
         {
             id: 0,
@@ -107,6 +61,36 @@ require(["select2/core", "select2/data/array"], function (Select2, ArrayAdapter)
         dataAdapter: ArrayAdapter,
         data: arrayData
     });
+
+    var ajaxSettings = {
+        url: "https://api.github.com/search/repositories",
+        dataType: "json",
+        data: function (params) {
+            return {
+                q: "test"
+            }
+        },
+        processResults: function (data) {
+            var results = $.map(data.items, function (d) {
+                return {
+                    id: d.id,
+                    text: d.full_name
+                }
+            });
+
+            return results
+        }
+    };
+
+    var ajaxSingle = new Select2($("#remote-single"), {
+        dataAdapter: AjaxAdapter,
+        ajax: ajaxSettings
+    });
+
+    var ajaxMultiple = new Select2($("#remote-multiple"), {
+        dataAdapter: AjaxAdapter,
+        ajax: ajaxSettings
+    });
 });
 </script>
 

src/js/select2/data/ajax.js

@@ -0,0 +1,47 @@
+define([
+  "./array",
+  "../utils",
+  "jquery"
+], function (ArrayAdapter, Utils, $) {
+  function AjaxAdapter ($element, options) {
+    this.ajaxOptions = options.options.ajax;
+
+    this.processResults = this.ajaxOptions.processResults ||
+      function (results) {
+        return results
+      };
+
+    ArrayAdapter.__super__.constructor.call(this, $element, options);
+  }
+
+  Utils.Extend(AjaxAdapter, ArrayAdapter);
+
+  AjaxAdapter.prototype.query = function (params, callback) {
+    var matches = [];
+    var self = this;
+
+    var options = $.extend({
+      type: "GET",
+    }, this.ajaxOptions);
+
+    if (typeof options.url === "function") {
+      options.url = options.url(params);
+    }
+
+    if (typeof options.data === "function") {
+      options.data = options.data(params);
+    }
+
+    var $request = $.ajax(options);
+
+    $request.success(function (data) {
+      var results = self.processResults(data);
+
+      console.log(results)
+
+      callback(results);
+    });
+  };
+
+  return AjaxAdapter;
+});

src/js/select2/data/array.js

@@ -4,7 +4,6 @@ define([
 ], function (SelectAdapter, Utils) {
   function ArrayAdapter ($element, options) {
     this.data = options.options.data;
-    this.selection = [];
 
     ArrayAdapter.__super__.constructor.call(this, $element, options);
   }

src/js/select2/options.js

@@ -5,7 +5,8 @@ define([
   './selection/single',
   './selection/multiple',
 
-  './data/array'
+  './data/array',
+  './data/ajax'
 ], function (SelectData, ResultsList, Dropdown, SingleSelection,
              MultipleSelection) {
   function Options (options) {