Working on rendering everything

.editorconfig

@@ -0,0 +1,6 @@
+[*]
+indent_style = space
+end_of_line = lf
+
+[*.js]
+indent_size = 2

dist/js/select2.amd.full.js

@@ -54,44 +54,221 @@ define('select2/utils',[], function () {
   return Utils;
 });
 
-define('select2/adapters/select',[
-  "../utils"
+define('select2/data/select',[
+  '../utils'
 ], function (Utils) {
-  function SelectAdapter (element, options) {
-    this.element = element;
+  function SelectAdapter ($element, options) {
+    this.$element = $element;
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
 
+  SelectAdapter.prototype.current = function () {
+    var data = [];
+    var self = this;
+
+    this.$element.find(":selected").each(function () {
+      var $option = $(this);
+
+      var option = self.item($option);
+
+      data.push(option);
+    });
+
+    return data;
+  };
+
+  SelectAdapter.prototype.item = function ($option) {
+    var data = {
+      id: $option.val(),
+      text: $option.html()
+    };
+
+    return data;
+  };
+
   return SelectAdapter;
 });
 
+define('select2/results',[
+  './utils'
+], function (Utils) {
+  function Results ($element, dataAdapter) {
+    this.$element = $element;
+    this.dataAdapter = dataAdapter;
+  }
+
+  Utils.Extend(Results, Utils.Observable);
+
+  Results.prototype.render = function () {
+    var $results = $(
+      '<ul class="options"></ul>'
+    );
+
+    return $results;
+  }
+
+  return Results;
+})
+;
+define('select2/dropdown',[
+  './utils'
+], function (Utils) {
+  function Dropdown ($element, options) {
+    this.$element = $element;
+  }
+
+  Utils.Extend(Dropdown, Utils.Observable);
+
+  Dropdown.prototype.render = function () {
+    var $dropdown = $(
+      '<div class="select2 select2-dropdown">' +
+        '<div class="results"></div>' +
+      '</div>'
+    );
+
+    return $dropdown;
+  }
+
+  return Dropdown;
+})
+;
+define('select2/selection',[
+  './utils'
+], function (Utils) {
+  function Selection ($element, options) {
+    this.$element = $element;
+    this.options = options;
+  }
+
+  Utils.Extend(Selection, Utils.Observable);
+
+  Selection.prototype.render = function () {
+    var $selection = $(
+      '<div class="single-select">' +
+        '<div class="rendered-selection"></div>' +
+      '</div>'
+    );
+
+    this.$selection = $selection;
+
+    return $selection;
+  }
+
+  Selection.prototype.bind = function ($container) {
+    var self = this;
+
+    $container.on('click', function (evt) {
+      self.trigger("toggle", {
+        originalEvent: evt
+      });
+    });
+  }
+
+  Selection.prototype.clear = function () {
+    this.$selection.find(".rendered-selection").text("");
+  }
+
+  Selection.prototype.display = function (data) {
+    return data.text;
+  }
+
+  Selection.prototype.update = function (data) {
+    if (data.length == 0) {
+      this.clear();
+      return;
+    }
+
+    var selection = data[0];
+
+    var formatted = this.display(selection);
+
+    this.$selection.find(".rendered-selection").html(formatted);
+  }
+
+  return Selection;
+});
+
 define('select2/options',[
-  "./adapters/select"
-], function (SelectAdapter) {
+  './data/select',
+  './results',
+  './dropdown',
+  './selection'
+], function (SelectData, ResultsList, Dropdown, Selection) {
   function Options (options) {
     this.options = options;
 
-    this.DataAdapter = SelectAdapter;
+    this.dataAdapter = SelectData;
+    this.resultsAdapter = ResultsList;
+    this.dropdownAdapter = Dropdown;
+    this.selectionAdapter = Selection;
   }
 
   return Options;
 })
 ;
 define('select2/core',[
-    "jquery",
-    "./options",
-    "./utils"
+  'jquery',
+  './options',
+  './utils'
 ], function ($, Options, Utils) {
-  var Select2 = function (element, options) {
-    this.element = element;
+  var Select2 = function ($element, options) {
+    this.$element = $element;
     this.options = new Options(options);
 
-    this.adapter = new this.options.DataAdapter(element, options);
+    // Set up containers and adapters
+
+    this.data = new this.options.dataAdapter($element, options);
+
+    var $container = this.render();
+
+    $container.insertAfter(this.$element);
+
+    this.selection = new this.options.selectionAdapter($element, options);
+
+    var $selectionContainer = $container.find(".selection");
+    var $selection = this.selection.render();
+
+    $selectionContainer.append($selection);
+
+    this.dropdown = new this.options.dropdownAdapter($element, options);
+
+    var $dropdown = this.dropdown.render();
+
+    $dropdown.insertAfter($container);
+
+    this.results = new this.options.resultsAdapter($element, options);
+
+    var $resultsContainer = $dropdown.find(".results");
+    var $results = this.results.render();
+
+    $resultsContainer.append($results);
+
+    // Set the initial state
+
+    var initialData = this.data.current();
+
+    this.selection.update(initialData);
+
+    var self = this;
+
+    this.$element.on("change", function () {
+      self.selection.update(self.data.current());
+    })
   };
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype.render = function () {
+    var $container = $(
+      '<div class="select2 select2-container">' +
+        '<div class="selection"></div>' +
+      '</div>'
+    );
+
+    return $container;
+  };
+
   return Select2;
 });
 

dist/js/select2.amd.js

@@ -54,44 +54,221 @@ define('select2/utils',[], function () {
   return Utils;
 });
 
-define('select2/adapters/select',[
-  "../utils"
+define('select2/data/select',[
+  '../utils'
 ], function (Utils) {
-  function SelectAdapter (element, options) {
-    this.element = element;
+  function SelectAdapter ($element, options) {
+    this.$element = $element;
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
 
+  SelectAdapter.prototype.current = function () {
+    var data = [];
+    var self = this;
+
+    this.$element.find(":selected").each(function () {
+      var $option = $(this);
+
+      var option = self.item($option);
+
+      data.push(option);
+    });
+
+    return data;
+  };
+
+  SelectAdapter.prototype.item = function ($option) {
+    var data = {
+      id: $option.val(),
+      text: $option.html()
+    };
+
+    return data;
+  };
+
   return SelectAdapter;
 });
 
+define('select2/results',[
+  './utils'
+], function (Utils) {
+  function Results ($element, dataAdapter) {
+    this.$element = $element;
+    this.dataAdapter = dataAdapter;
+  }
+
+  Utils.Extend(Results, Utils.Observable);
+
+  Results.prototype.render = function () {
+    var $results = $(
+      '<ul class="options"></ul>'
+    );
+
+    return $results;
+  }
+
+  return Results;
+})
+;
+define('select2/dropdown',[
+  './utils'
+], function (Utils) {
+  function Dropdown ($element, options) {
+    this.$element = $element;
+  }
+
+  Utils.Extend(Dropdown, Utils.Observable);
+
+  Dropdown.prototype.render = function () {
+    var $dropdown = $(
+      '<div class="select2 select2-dropdown">' +
+        '<div class="results"></div>' +
+      '</div>'
+    );
+
+    return $dropdown;
+  }
+
+  return Dropdown;
+})
+;
+define('select2/selection',[
+  './utils'
+], function (Utils) {
+  function Selection ($element, options) {
+    this.$element = $element;
+    this.options = options;
+  }
+
+  Utils.Extend(Selection, Utils.Observable);
+
+  Selection.prototype.render = function () {
+    var $selection = $(
+      '<div class="single-select">' +
+        '<div class="rendered-selection"></div>' +
+      '</div>'
+    );
+
+    this.$selection = $selection;
+
+    return $selection;
+  }
+
+  Selection.prototype.bind = function ($container) {
+    var self = this;
+
+    $container.on('click', function (evt) {
+      self.trigger("toggle", {
+        originalEvent: evt
+      });
+    });
+  }
+
+  Selection.prototype.clear = function () {
+    this.$selection.find(".rendered-selection").text("");
+  }
+
+  Selection.prototype.display = function (data) {
+    return data.text;
+  }
+
+  Selection.prototype.update = function (data) {
+    if (data.length == 0) {
+      this.clear();
+      return;
+    }
+
+    var selection = data[0];
+
+    var formatted = this.display(selection);
+
+    this.$selection.find(".rendered-selection").html(formatted);
+  }
+
+  return Selection;
+});
+
 define('select2/options',[
-  "./adapters/select"
-], function (SelectAdapter) {
+  './data/select',
+  './results',
+  './dropdown',
+  './selection'
+], function (SelectData, ResultsList, Dropdown, Selection) {
   function Options (options) {
     this.options = options;
 
-    this.DataAdapter = SelectAdapter;
+    this.dataAdapter = SelectData;
+    this.resultsAdapter = ResultsList;
+    this.dropdownAdapter = Dropdown;
+    this.selectionAdapter = Selection;
   }
 
   return Options;
 })
 ;
 define('select2/core',[
-    "jquery",
-    "./options",
-    "./utils"
+  'jquery',
+  './options',
+  './utils'
 ], function ($, Options, Utils) {
-  var Select2 = function (element, options) {
-    this.element = element;
+  var Select2 = function ($element, options) {
+    this.$element = $element;
     this.options = new Options(options);
 
-    this.adapter = new this.options.DataAdapter(element, options);
+    // Set up containers and adapters
+
+    this.data = new this.options.dataAdapter($element, options);
+
+    var $container = this.render();
+
+    $container.insertAfter(this.$element);
+
+    this.selection = new this.options.selectionAdapter($element, options);
+
+    var $selectionContainer = $container.find(".selection");
+    var $selection = this.selection.render();
+
+    $selectionContainer.append($selection);
+
+    this.dropdown = new this.options.dropdownAdapter($element, options);
+
+    var $dropdown = this.dropdown.render();
+
+    $dropdown.insertAfter($container);
+
+    this.results = new this.options.resultsAdapter($element, options);
+
+    var $resultsContainer = $dropdown.find(".results");
+    var $results = this.results.render();
+
+    $resultsContainer.append($results);
+
+    // Set the initial state
+
+    var initialData = this.data.current();
+
+    this.selection.update(initialData);
+
+    var self = this;
+
+    this.$element.on("change", function () {
+      self.selection.update(self.data.current());
+    })
   };
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype.render = function () {
+    var $container = $(
+      '<div class="select2 select2-container">' +
+        '<div class="selection"></div>' +
+      '</div>'
+    );
+
+    return $container;
+  };
+
   return Select2;
 });
 

dist/js/select2.full.js

@@ -9591,44 +9591,221 @@ define('select2/utils',[], function () {
   return Utils;
 });
 
-define('select2/adapters/select',[
-  "../utils"
+define('select2/data/select',[
+  '../utils'
 ], function (Utils) {
-  function SelectAdapter (element, options) {
-    this.element = element;
+  function SelectAdapter ($element, options) {
+    this.$element = $element;
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
 
+  SelectAdapter.prototype.current = function () {
+    var data = [];
+    var self = this;
+
+    this.$element.find(":selected").each(function () {
+      var $option = $(this);
+
+      var option = self.item($option);
+
+      data.push(option);
+    });
+
+    return data;
+  };
+
+  SelectAdapter.prototype.item = function ($option) {
+    var data = {
+      id: $option.val(),
+      text: $option.html()
+    };
+
+    return data;
+  };
+
   return SelectAdapter;
 });
 
+define('select2/results',[
+  './utils'
+], function (Utils) {
+  function Results ($element, dataAdapter) {
+    this.$element = $element;
+    this.dataAdapter = dataAdapter;
+  }
+
+  Utils.Extend(Results, Utils.Observable);
+
+  Results.prototype.render = function () {
+    var $results = $(
+      '<ul class="options"></ul>'
+    );
+
+    return $results;
+  }
+
+  return Results;
+})
+;
+define('select2/dropdown',[
+  './utils'
+], function (Utils) {
+  function Dropdown ($element, options) {
+    this.$element = $element;
+  }
+
+  Utils.Extend(Dropdown, Utils.Observable);
+
+  Dropdown.prototype.render = function () {
+    var $dropdown = $(
+      '<div class="select2 select2-dropdown">' +
+        '<div class="results"></div>' +
+      '</div>'
+    );
+
+    return $dropdown;
+  }
+
+  return Dropdown;
+})
+;
+define('select2/selection',[
+  './utils'
+], function (Utils) {
+  function Selection ($element, options) {
+    this.$element = $element;
+    this.options = options;
+  }
+
+  Utils.Extend(Selection, Utils.Observable);
+
+  Selection.prototype.render = function () {
+    var $selection = $(
+      '<div class="single-select">' +
+        '<div class="rendered-selection"></div>' +
+      '</div>'
+    );
+
+    this.$selection = $selection;
+
+    return $selection;
+  }
+
+  Selection.prototype.bind = function ($container) {
+    var self = this;
+
+    $container.on('click', function (evt) {
+      self.trigger("toggle", {
+        originalEvent: evt
+      });
+    });
+  }
+
+  Selection.prototype.clear = function () {
+    this.$selection.find(".rendered-selection").text("");
+  }
+
+  Selection.prototype.display = function (data) {
+    return data.text;
+  }
+
+  Selection.prototype.update = function (data) {
+    if (data.length == 0) {
+      this.clear();
+      return;
+    }
+
+    var selection = data[0];
+
+    var formatted = this.display(selection);
+
+    this.$selection.find(".rendered-selection").html(formatted);
+  }
+
+  return Selection;
+});
+
 define('select2/options',[
-  "./adapters/select"
-], function (SelectAdapter) {
+  './data/select',
+  './results',
+  './dropdown',
+  './selection'
+], function (SelectData, ResultsList, Dropdown, Selection) {
   function Options (options) {
     this.options = options;
 
-    this.DataAdapter = SelectAdapter;
+    this.dataAdapter = SelectData;
+    this.resultsAdapter = ResultsList;
+    this.dropdownAdapter = Dropdown;
+    this.selectionAdapter = Selection;
   }
 
   return Options;
 })
 ;
 define('select2/core',[
-    "jquery",
-    "./options",
-    "./utils"
+  'jquery',
+  './options',
+  './utils'
 ], function ($, Options, Utils) {
-  var Select2 = function (element, options) {
-    this.element = element;
+  var Select2 = function ($element, options) {
+    this.$element = $element;
     this.options = new Options(options);
 
-    this.adapter = new this.options.DataAdapter(element, options);
+    // Set up containers and adapters
+
+    this.data = new this.options.dataAdapter($element, options);
+
+    var $container = this.render();
+
+    $container.insertAfter(this.$element);
+
+    this.selection = new this.options.selectionAdapter($element, options);
+
+    var $selectionContainer = $container.find(".selection");
+    var $selection = this.selection.render();
+
+    $selectionContainer.append($selection);
+
+    this.dropdown = new this.options.dropdownAdapter($element, options);
+
+    var $dropdown = this.dropdown.render();
+
+    $dropdown.insertAfter($container);
+
+    this.results = new this.options.resultsAdapter($element, options);
+
+    var $resultsContainer = $dropdown.find(".results");
+    var $results = this.results.render();
+
+    $resultsContainer.append($results);
+
+    // Set the initial state
+
+    var initialData = this.data.current();
+
+    this.selection.update(initialData);
+
+    var self = this;
+
+    this.$element.on("change", function () {
+      self.selection.update(self.data.current());
+    })
   };
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype.render = function () {
+    var $container = $(
+      '<div class="select2 select2-container">' +
+        '<div class="selection"></div>' +
+      '</div>'
+    );
+
+    return $container;
+  };
+
   return Select2;
 });
 

dist/js/select2.js

@@ -482,44 +482,221 @@ define('select2/utils',[], function () {
   return Utils;
 });
 
-define('select2/adapters/select',[
-  "../utils"
+define('select2/data/select',[
+  '../utils'
 ], function (Utils) {
-  function SelectAdapter (element, options) {
-    this.element = element;
+  function SelectAdapter ($element, options) {
+    this.$element = $element;
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
 
+  SelectAdapter.prototype.current = function () {
+    var data = [];
+    var self = this;
+
+    this.$element.find(":selected").each(function () {
+      var $option = $(this);
+
+      var option = self.item($option);
+
+      data.push(option);
+    });
+
+    return data;
+  };
+
+  SelectAdapter.prototype.item = function ($option) {
+    var data = {
+      id: $option.val(),
+      text: $option.html()
+    };
+
+    return data;
+  };
+
   return SelectAdapter;
 });
 
+define('select2/results',[
+  './utils'
+], function (Utils) {
+  function Results ($element, dataAdapter) {
+    this.$element = $element;
+    this.dataAdapter = dataAdapter;
+  }
+
+  Utils.Extend(Results, Utils.Observable);
+
+  Results.prototype.render = function () {
+    var $results = $(
+      '<ul class="options"></ul>'
+    );
+
+    return $results;
+  }
+
+  return Results;
+})
+;
+define('select2/dropdown',[
+  './utils'
+], function (Utils) {
+  function Dropdown ($element, options) {
+    this.$element = $element;
+  }
+
+  Utils.Extend(Dropdown, Utils.Observable);
+
+  Dropdown.prototype.render = function () {
+    var $dropdown = $(
+      '<div class="select2 select2-dropdown">' +
+        '<div class="results"></div>' +
+      '</div>'
+    );
+
+    return $dropdown;
+  }
+
+  return Dropdown;
+})
+;
+define('select2/selection',[
+  './utils'
+], function (Utils) {
+  function Selection ($element, options) {
+    this.$element = $element;
+    this.options = options;
+  }
+
+  Utils.Extend(Selection, Utils.Observable);
+
+  Selection.prototype.render = function () {
+    var $selection = $(
+      '<div class="single-select">' +
+        '<div class="rendered-selection"></div>' +
+      '</div>'
+    );
+
+    this.$selection = $selection;
+
+    return $selection;
+  }
+
+  Selection.prototype.bind = function ($container) {
+    var self = this;
+
+    $container.on('click', function (evt) {
+      self.trigger("toggle", {
+        originalEvent: evt
+      });
+    });
+  }
+
+  Selection.prototype.clear = function () {
+    this.$selection.find(".rendered-selection").text("");
+  }
+
+  Selection.prototype.display = function (data) {
+    return data.text;
+  }
+
+  Selection.prototype.update = function (data) {
+    if (data.length == 0) {
+      this.clear();
+      return;
+    }
+
+    var selection = data[0];
+
+    var formatted = this.display(selection);
+
+    this.$selection.find(".rendered-selection").html(formatted);
+  }
+
+  return Selection;
+});
+
 define('select2/options',[
-  "./adapters/select"
-], function (SelectAdapter) {
+  './data/select',
+  './results',
+  './dropdown',
+  './selection'
+], function (SelectData, ResultsList, Dropdown, Selection) {
   function Options (options) {
     this.options = options;
 
-    this.DataAdapter = SelectAdapter;
+    this.dataAdapter = SelectData;
+    this.resultsAdapter = ResultsList;
+    this.dropdownAdapter = Dropdown;
+    this.selectionAdapter = Selection;
   }
 
   return Options;
 })
 ;
 define('select2/core',[
-    "jquery",
-    "./options",
-    "./utils"
+  'jquery',
+  './options',
+  './utils'
 ], function ($, Options, Utils) {
-  var Select2 = function (element, options) {
-    this.element = element;
+  var Select2 = function ($element, options) {
+    this.$element = $element;
     this.options = new Options(options);
 
-    this.adapter = new this.options.DataAdapter(element, options);
+    // Set up containers and adapters
+
+    this.data = new this.options.dataAdapter($element, options);
+
+    var $container = this.render();
+
+    $container.insertAfter(this.$element);
+
+    this.selection = new this.options.selectionAdapter($element, options);
+
+    var $selectionContainer = $container.find(".selection");
+    var $selection = this.selection.render();
+
+    $selectionContainer.append($selection);
+
+    this.dropdown = new this.options.dropdownAdapter($element, options);
+
+    var $dropdown = this.dropdown.render();
+
+    $dropdown.insertAfter($container);
+
+    this.results = new this.options.resultsAdapter($element, options);
+
+    var $resultsContainer = $dropdown.find(".results");
+    var $results = this.results.render();
+
+    $resultsContainer.append($results);
+
+    // Set the initial state
+
+    var initialData = this.data.current();
+
+    this.selection.update(initialData);
+
+    var self = this;
+
+    this.$element.on("change", function () {
+      self.selection.update(self.data.current());
+    })
   };
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype.render = function () {
+    var $container = $(
+      '<div class="select2 select2-container">' +
+        '<div class="selection"></div>' +
+      '</div>'
+    );
+
+    return $container;
+  };
+
   return Select2;
 });
 

src/js/select2/adapters/select.js

@@ -1,11 +0,0 @@
-define([
-  "../utils"
-], function (Utils) {
-  function SelectAdapter (element, options) {
-    this.element = element;
-  }
-
-  Utils.Extend(SelectAdapter, Utils.Observable);
-
-  return SelectAdapter;
-});

src/js/select2/core.js

@@ -1,16 +1,64 @@
 define([
-    "jquery",
-    "./options",
-    "./utils"
+  'jquery',
+  './options',
+  './utils'
 ], function ($, Options, Utils) {
-  var Select2 = function (element, options) {
-    this.element = element;
+  var Select2 = function ($element, options) {
+    this.$element = $element;
     this.options = new Options(options);
 
-    this.adapter = new this.options.DataAdapter(element, options);
+    // Set up containers and adapters
+
+    this.data = new this.options.dataAdapter($element, options);
+
+    var $container = this.render();
+
+    $container.insertAfter(this.$element);
+
+    this.selection = new this.options.selectionAdapter($element, options);
+
+    var $selectionContainer = $container.find(".selection");
+    var $selection = this.selection.render();
+
+    $selectionContainer.append($selection);
+
+    this.dropdown = new this.options.dropdownAdapter($element, options);
+
+    var $dropdown = this.dropdown.render();
+
+    $dropdown.insertAfter($container);
+
+    this.results = new this.options.resultsAdapter($element, options);
+
+    var $resultsContainer = $dropdown.find(".results");
+    var $results = this.results.render();
+
+    $resultsContainer.append($results);
+
+    // Set the initial state
+
+    var initialData = this.data.current();
+
+    this.selection.update(initialData);
+
+    var self = this;
+
+    this.$element.on("change", function () {
+      self.selection.update(self.data.current());
+    })
   };
 
   Utils.Extend(Select2, Utils.Observable);
 
+  Select2.prototype.render = function () {
+    var $container = $(
+      '<div class="select2 select2-container">' +
+        '<div class="selection"></div>' +
+      '</div>'
+    );
+
+    return $container;
+  };
+
   return Select2;
 });

src/js/select2/data/select.js

@@ -0,0 +1,35 @@
+define([
+  '../utils'
+], function (Utils) {
+  function SelectAdapter ($element, options) {
+    this.$element = $element;
+  }
+
+  Utils.Extend(SelectAdapter, Utils.Observable);
+
+  SelectAdapter.prototype.current = function () {
+    var data = [];
+    var self = this;
+
+    this.$element.find(":selected").each(function () {
+      var $option = $(this);
+
+      var option = self.item($option);
+
+      data.push(option);
+    });
+
+    return data;
+  };
+
+  SelectAdapter.prototype.item = function ($option) {
+    var data = {
+      id: $option.val(),
+      text: $option.html()
+    };
+
+    return data;
+  };
+
+  return SelectAdapter;
+});

src/js/select2/dropdown.js

@@ -0,0 +1,21 @@
+define([
+  './utils'
+], function (Utils) {
+  function Dropdown ($element, options) {
+    this.$element = $element;
+  }
+
+  Utils.Extend(Dropdown, Utils.Observable);
+
+  Dropdown.prototype.render = function () {
+    var $dropdown = $(
+      '<div class="select2 select2-dropdown">' +
+        '<div class="results"></div>' +
+      '</div>'
+    );
+
+    return $dropdown;
+  }
+
+  return Dropdown;
+})

src/js/select2/options.js

@@ -1,10 +1,16 @@
 define([
-  "./adapters/select"
-], function (SelectAdapter) {
+  './data/select',
+  './results',
+  './dropdown',
+  './selection'
+], function (SelectData, ResultsList, Dropdown, Selection) {
   function Options (options) {
     this.options = options;
 
-    this.DataAdapter = SelectAdapter;
+    this.dataAdapter = SelectData;
+    this.resultsAdapter = ResultsList;
+    this.dropdownAdapter = Dropdown;
+    this.selectionAdapter = Selection;
   }
 
   return Options;

src/js/select2/results.js

@@ -0,0 +1,20 @@
+define([
+  './utils'
+], function (Utils) {
+  function Results ($element, dataAdapter) {
+    this.$element = $element;
+    this.dataAdapter = dataAdapter;
+  }
+
+  Utils.Extend(Results, Utils.Observable);
+
+  Results.prototype.render = function () {
+    var $results = $(
+      '<ul class="options"></ul>'
+    );
+
+    return $results;
+  }
+
+  return Results;
+})

src/js/select2/selection.js

@@ -0,0 +1,55 @@
+define([
+  './utils'
+], function (Utils) {
+  function Selection ($element, options) {
+    this.$element = $element;
+    this.options = options;
+  }
+
+  Utils.Extend(Selection, Utils.Observable);
+
+  Selection.prototype.render = function () {
+    var $selection = $(
+      '<div class="single-select">' +
+        '<div class="rendered-selection"></div>' +
+      '</div>'
+    );
+
+    this.$selection = $selection;
+
+    return $selection;
+  }
+
+  Selection.prototype.bind = function ($container) {
+    var self = this;
+
+    $container.on('click', function (evt) {
+      self.trigger("toggle", {
+        originalEvent: evt
+      });
+    });
+  }
+
+  Selection.prototype.clear = function () {
+    this.$selection.find(".rendered-selection").text("");
+  }
+
+  Selection.prototype.display = function (data) {
+    return data.text;
+  }
+
+  Selection.prototype.update = function (data) {
+    if (data.length == 0) {
+      this.clear();
+      return;
+    }
+
+    var selection = data[0];
+
+    var formatted = this.display(selection);
+
+    this.$selection.find(".rendered-selection").html(formatted);
+  }
+
+  return Selection;
+});