From 297a06f8d4d07d9c0951f2cacd42e0101d7217bc Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@kevinbrown.in>
Date: Tue, 26 Aug 2014 21:18:26 -0400
Subject: [PATCH] Working on rendering everything

---
 .editorconfig                     |   6 +
 dist/js/select2.amd.full.js       | 203 ++++++++++++++++++++++++++++--
 dist/js/select2.amd.js            | 203 ++++++++++++++++++++++++++++--
 dist/js/select2.full.js           | 203 ++++++++++++++++++++++++++++--
 dist/js/select2.js                | 203 ++++++++++++++++++++++++++++--
 src/js/select2/adapters/select.js |  11 --
 src/js/select2/core.js            |  60 ++++++++-
 src/js/select2/data/select.js     |  35 ++++++
 src/js/select2/dropdown.js        |  21 ++++
 src/js/select2/options.js         |  12 +-
 src/js/select2/results.js         |  20 +++
 src/js/select2/selection.js       |  55 ++++++++
 12 files changed, 960 insertions(+), 72 deletions(-)
 create mode 100644 .editorconfig
 delete mode 100644 src/js/select2/adapters/select.js
 create mode 100644 src/js/select2/data/select.js
 create mode 100644 src/js/select2/dropdown.js
 create mode 100644 src/js/select2/results.js
 create mode 100644 src/js/select2/selection.js

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..54f4d3be
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,6 @@
+[*]
+indent_style = space
+end_of_line = lf
+
+[*.js]
+indent_size = 2
diff --git a/dist/js/select2.amd.full.js b/dist/js/select2.amd.full.js
index 3f991c4d..d069ffd0 100644
--- a/dist/js/select2.amd.full.js
+++ b/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;
 });
 
diff --git a/dist/js/select2.amd.js b/dist/js/select2.amd.js
index 3f991c4d..d069ffd0 100644
--- a/dist/js/select2.amd.js
+++ b/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;
 });
 
diff --git a/dist/js/select2.full.js b/dist/js/select2.full.js
index f3e54700..6091a5fc 100644
--- a/dist/js/select2.full.js
+++ b/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;
 });
 
diff --git a/dist/js/select2.js b/dist/js/select2.js
index f7bbbc43..de65e56a 100644
--- a/dist/js/select2.js
+++ b/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;
 });
 
diff --git a/src/js/select2/adapters/select.js b/src/js/select2/adapters/select.js
deleted file mode 100644
index 2c62708f..00000000
--- a/src/js/select2/adapters/select.js
+++ /dev/null
@@ -1,11 +0,0 @@
-define([
-  "../utils"
-], function (Utils) {
-  function SelectAdapter (element, options) {
-    this.element = element;
-  }
-
-  Utils.Extend(SelectAdapter, Utils.Observable);
-
-  return SelectAdapter;
-});
diff --git a/src/js/select2/core.js b/src/js/select2/core.js
index 150eed8e..45fc0e3f 100644
--- a/src/js/select2/core.js
+++ b/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;
 });
diff --git a/src/js/select2/data/select.js b/src/js/select2/data/select.js
new file mode 100644
index 00000000..fdda9a2a
--- /dev/null
+++ b/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;
+});
diff --git a/src/js/select2/dropdown.js b/src/js/select2/dropdown.js
new file mode 100644
index 00000000..339093f0
--- /dev/null
+++ b/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;
+})
diff --git a/src/js/select2/options.js b/src/js/select2/options.js
index 2be781e0..2010ef42 100644
--- a/src/js/select2/options.js
+++ b/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;
diff --git a/src/js/select2/results.js b/src/js/select2/results.js
new file mode 100644
index 00000000..2ed32264
--- /dev/null
+++ b/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;
+})
diff --git a/src/js/select2/selection.js b/src/js/select2/selection.js
new file mode 100644
index 00000000..f4301e05
--- /dev/null
+++ b/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;
+});