Basic dropdown is in place

dist/css/select2.css

@@ -19,6 +19,35 @@
     line-height: 28px;
     overflow: hidden;
     text-overflow: ellipsis; }
+.select2-container.open .selection .single-select {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container .dropdown {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  max-height: 200px;
+  overflow-y: scroll;
+  position: absolute;
+  left: -100000px;
+  top: -100000px;
+  width: 100%; }
+  .select2-container .dropdown .results .options {
+    list-style: none;
+    margin: 0;
+    padding: 0; }
+    .select2-container .dropdown .results .options .option {
+      cursor: pointer;
+      padding: 6px; }
+.select2-container.open .dropdown {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  left: 0;
+  top: 28px; }
 
 .s2-container {
   margin: 0;

dist/js/select2.amd.full.js

@@ -57,10 +57,13 @@ define('select2/utils',[], function () {
 });
 
 define('select2/data/select',[
-  '../utils'
+  '../utils',
-], function (Utils) {
+  'jquery'
+], function (Utils, $) {
   function SelectAdapter ($element, options) {
     this.$element = $element;
+
+    SelectAdapter.__super__.constructor.call(this);
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
@@ -80,6 +83,32 @@ define('select2/data/select',[
     callback(data);
   };
 
+  SelectAdapter.prototype.select = function (data) {
+    var val;
+
+    if (this.$element.prop("multiple")) {
+      var currentData = this.current();
+
+      data = [data];
+      data.push(currentData);
+
+      val = [];
+
+      for (var d = 0; d < data.length; d++) {
+        id = data[d].id;
+
+        if (ids.indexOf(id) === -1) {
+          val.push(id);
+        }
+      }
+    } else {
+      val = data.id;
+    }
+
+    this.$element.val(val);
+    this.$element.trigger("change");
+  }
+
   SelectAdapter.prototype.query = function (params, callback) {
     var data = [];
     var self = this;
@@ -107,6 +136,10 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    if ($.trim(params.term) == "") {
+      return true;
+    }
+
     if (data.text.indexOf(params.term) > -1) {
       return true;
     }
@@ -122,7 +155,9 @@ define('select2/results',[
 ], function (Utils) {
   function Results ($element, dataAdapter) {
     this.$element = $element;
-    this.dataAdapter = dataAdapter;
+    this.data = dataAdapter;
+
+    Results.__super__.constructor.call(this);
   }
 
   Utils.Extend(Results, Utils.Observable);
@@ -132,9 +167,62 @@ define('select2/results',[
       '<ul class="options"></ul>'
     );
 
+    this.$results = $results;
+
     return $results;
+  };
+
+  Results.prototype.clear = function () {
+    this.$results.empty();
+  };
+
+  Results.prototype.append = function (data) {
+    var $options = [];
+
+    for (var d = 0; d < data.length; d++) {
+      var item = data[d];
+
+      var $option = this.option(item);
+
+      $options.push($option);
     }
 
+    this.$results.append($options);
+  };
+
+  Results.prototype.option = function (data) {
+    var $option = $(
+      '<li class="option"></li>'
+    );
+
+    $option.html(data.text);
+    $option.data("data", data);
+
+    return $option;
+  }
+
+  Results.prototype.bind = function ($container) {
+    var self = this;
+
+    this.on("results:all", function (data) {
+      self.clear();
+      self.append(data);
+    });
+
+    this.on("results:append", function (data) {
+      self.append(data);
+    })
+
+    this.$results.on("click", ".option", function (evt) {
+      var data = $(this).data("data");
+
+      self.trigger("selected", {
+        originalEvent: evt,
+        data: data
+      })
+    });
+  };
+
   return Results;
 })
 ;
@@ -280,15 +368,10 @@ define('select2/core',[
 
     // Bind events
 
-    this.selection.bind($container);
-
-    // Set the initial state
-
     var self = this;
 
-    this.data.current(function (initialData) {
+    this.selection.bind($container);
-      self.selection.update(initialData);
+    this.results.bind($container);
-    });
 
     this.$element.on("change", function () {
       self.data.current(function (data) {
@@ -299,6 +382,21 @@ define('select2/core',[
     this.selection.on("toggle", function () {
       $container.toggleClass("open");
     });
+
+    this.results.on("selected", function (params) {
+      self.data.select(params.data);
+      $container.removeClass("open");
+    });
+
+    // Set the initial state
+
+    this.data.current(function (initialData) {
+      self.selection.update(initialData);
+    });
+
+    this.data.query({}, function (data) {
+      self.results.trigger("results:all", data);
+    });
   };
 
   Utils.Extend(Select2, Utils.Observable);

dist/js/select2.amd.js

@@ -57,10 +57,13 @@ define('select2/utils',[], function () {
 });
 
 define('select2/data/select',[
-  '../utils'
+  '../utils',
-], function (Utils) {
+  'jquery'
+], function (Utils, $) {
   function SelectAdapter ($element, options) {
     this.$element = $element;
+
+    SelectAdapter.__super__.constructor.call(this);
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
@@ -80,6 +83,32 @@ define('select2/data/select',[
     callback(data);
   };
 
+  SelectAdapter.prototype.select = function (data) {
+    var val;
+
+    if (this.$element.prop("multiple")) {
+      var currentData = this.current();
+
+      data = [data];
+      data.push(currentData);
+
+      val = [];
+
+      for (var d = 0; d < data.length; d++) {
+        id = data[d].id;
+
+        if (ids.indexOf(id) === -1) {
+          val.push(id);
+        }
+      }
+    } else {
+      val = data.id;
+    }
+
+    this.$element.val(val);
+    this.$element.trigger("change");
+  }
+
   SelectAdapter.prototype.query = function (params, callback) {
     var data = [];
     var self = this;
@@ -107,6 +136,10 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    if ($.trim(params.term) == "") {
+      return true;
+    }
+
     if (data.text.indexOf(params.term) > -1) {
       return true;
     }
@@ -122,7 +155,9 @@ define('select2/results',[
 ], function (Utils) {
   function Results ($element, dataAdapter) {
     this.$element = $element;
-    this.dataAdapter = dataAdapter;
+    this.data = dataAdapter;
+
+    Results.__super__.constructor.call(this);
   }
 
   Utils.Extend(Results, Utils.Observable);
@@ -132,9 +167,62 @@ define('select2/results',[
       '<ul class="options"></ul>'
     );
 
+    this.$results = $results;
+
     return $results;
+  };
+
+  Results.prototype.clear = function () {
+    this.$results.empty();
+  };
+
+  Results.prototype.append = function (data) {
+    var $options = [];
+
+    for (var d = 0; d < data.length; d++) {
+      var item = data[d];
+
+      var $option = this.option(item);
+
+      $options.push($option);
     }
 
+    this.$results.append($options);
+  };
+
+  Results.prototype.option = function (data) {
+    var $option = $(
+      '<li class="option"></li>'
+    );
+
+    $option.html(data.text);
+    $option.data("data", data);
+
+    return $option;
+  }
+
+  Results.prototype.bind = function ($container) {
+    var self = this;
+
+    this.on("results:all", function (data) {
+      self.clear();
+      self.append(data);
+    });
+
+    this.on("results:append", function (data) {
+      self.append(data);
+    })
+
+    this.$results.on("click", ".option", function (evt) {
+      var data = $(this).data("data");
+
+      self.trigger("selected", {
+        originalEvent: evt,
+        data: data
+      })
+    });
+  };
+
   return Results;
 })
 ;
@@ -280,15 +368,10 @@ define('select2/core',[
 
     // Bind events
 
-    this.selection.bind($container);
-
-    // Set the initial state
-
     var self = this;
 
-    this.data.current(function (initialData) {
+    this.selection.bind($container);
-      self.selection.update(initialData);
+    this.results.bind($container);
-    });
 
     this.$element.on("change", function () {
       self.data.current(function (data) {
@@ -299,6 +382,21 @@ define('select2/core',[
     this.selection.on("toggle", function () {
       $container.toggleClass("open");
     });
+
+    this.results.on("selected", function (params) {
+      self.data.select(params.data);
+      $container.removeClass("open");
+    });
+
+    // Set the initial state
+
+    this.data.current(function (initialData) {
+      self.selection.update(initialData);
+    });
+
+    this.data.query({}, function (data) {
+      self.results.trigger("results:all", data);
+    });
   };
 
   Utils.Extend(Select2, Utils.Observable);

dist/js/select2.full.js

@@ -9594,10 +9594,13 @@ define('select2/utils',[], function () {
 });
 
 define('select2/data/select',[
-  '../utils'
+  '../utils',
-], function (Utils) {
+  'jquery'
+], function (Utils, $) {
   function SelectAdapter ($element, options) {
     this.$element = $element;
+
+    SelectAdapter.__super__.constructor.call(this);
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
@@ -9617,6 +9620,32 @@ define('select2/data/select',[
     callback(data);
   };
 
+  SelectAdapter.prototype.select = function (data) {
+    var val;
+
+    if (this.$element.prop("multiple")) {
+      var currentData = this.current();
+
+      data = [data];
+      data.push(currentData);
+
+      val = [];
+
+      for (var d = 0; d < data.length; d++) {
+        id = data[d].id;
+
+        if (ids.indexOf(id) === -1) {
+          val.push(id);
+        }
+      }
+    } else {
+      val = data.id;
+    }
+
+    this.$element.val(val);
+    this.$element.trigger("change");
+  }
+
   SelectAdapter.prototype.query = function (params, callback) {
     var data = [];
     var self = this;
@@ -9644,6 +9673,10 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    if ($.trim(params.term) == "") {
+      return true;
+    }
+
     if (data.text.indexOf(params.term) > -1) {
       return true;
     }
@@ -9659,7 +9692,9 @@ define('select2/results',[
 ], function (Utils) {
   function Results ($element, dataAdapter) {
     this.$element = $element;
-    this.dataAdapter = dataAdapter;
+    this.data = dataAdapter;
+
+    Results.__super__.constructor.call(this);
   }
 
   Utils.Extend(Results, Utils.Observable);
@@ -9669,9 +9704,62 @@ define('select2/results',[
       '<ul class="options"></ul>'
     );
 
+    this.$results = $results;
+
     return $results;
+  };
+
+  Results.prototype.clear = function () {
+    this.$results.empty();
+  };
+
+  Results.prototype.append = function (data) {
+    var $options = [];
+
+    for (var d = 0; d < data.length; d++) {
+      var item = data[d];
+
+      var $option = this.option(item);
+
+      $options.push($option);
     }
 
+    this.$results.append($options);
+  };
+
+  Results.prototype.option = function (data) {
+    var $option = $(
+      '<li class="option"></li>'
+    );
+
+    $option.html(data.text);
+    $option.data("data", data);
+
+    return $option;
+  }
+
+  Results.prototype.bind = function ($container) {
+    var self = this;
+
+    this.on("results:all", function (data) {
+      self.clear();
+      self.append(data);
+    });
+
+    this.on("results:append", function (data) {
+      self.append(data);
+    })
+
+    this.$results.on("click", ".option", function (evt) {
+      var data = $(this).data("data");
+
+      self.trigger("selected", {
+        originalEvent: evt,
+        data: data
+      })
+    });
+  };
+
   return Results;
 })
 ;
@@ -9817,15 +9905,10 @@ define('select2/core',[
 
     // Bind events
 
-    this.selection.bind($container);
-
-    // Set the initial state
-
     var self = this;
 
-    this.data.current(function (initialData) {
+    this.selection.bind($container);
-      self.selection.update(initialData);
+    this.results.bind($container);
-    });
 
     this.$element.on("change", function () {
       self.data.current(function (data) {
@@ -9836,6 +9919,21 @@ define('select2/core',[
     this.selection.on("toggle", function () {
       $container.toggleClass("open");
     });
+
+    this.results.on("selected", function (params) {
+      self.data.select(params.data);
+      $container.removeClass("open");
+    });
+
+    // Set the initial state
+
+    this.data.current(function (initialData) {
+      self.selection.update(initialData);
+    });
+
+    this.data.query({}, function (data) {
+      self.results.trigger("results:all", data);
+    });
   };
 
   Utils.Extend(Select2, Utils.Observable);

dist/js/select2.js

@@ -485,10 +485,13 @@ define('select2/utils',[], function () {
 });
 
 define('select2/data/select',[
-  '../utils'
+  '../utils',
-], function (Utils) {
+  'jquery'
+], function (Utils, $) {
   function SelectAdapter ($element, options) {
     this.$element = $element;
+
+    SelectAdapter.__super__.constructor.call(this);
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
@@ -508,6 +511,32 @@ define('select2/data/select',[
     callback(data);
   };
 
+  SelectAdapter.prototype.select = function (data) {
+    var val;
+
+    if (this.$element.prop("multiple")) {
+      var currentData = this.current();
+
+      data = [data];
+      data.push(currentData);
+
+      val = [];
+
+      for (var d = 0; d < data.length; d++) {
+        id = data[d].id;
+
+        if (ids.indexOf(id) === -1) {
+          val.push(id);
+        }
+      }
+    } else {
+      val = data.id;
+    }
+
+    this.$element.val(val);
+    this.$element.trigger("change");
+  }
+
   SelectAdapter.prototype.query = function (params, callback) {
     var data = [];
     var self = this;
@@ -535,6 +564,10 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    if ($.trim(params.term) == "") {
+      return true;
+    }
+
     if (data.text.indexOf(params.term) > -1) {
       return true;
     }
@@ -550,7 +583,9 @@ define('select2/results',[
 ], function (Utils) {
   function Results ($element, dataAdapter) {
     this.$element = $element;
-    this.dataAdapter = dataAdapter;
+    this.data = dataAdapter;
+
+    Results.__super__.constructor.call(this);
   }
 
   Utils.Extend(Results, Utils.Observable);
@@ -560,9 +595,62 @@ define('select2/results',[
       '<ul class="options"></ul>'
     );
 
+    this.$results = $results;
+
     return $results;
+  };
+
+  Results.prototype.clear = function () {
+    this.$results.empty();
+  };
+
+  Results.prototype.append = function (data) {
+    var $options = [];
+
+    for (var d = 0; d < data.length; d++) {
+      var item = data[d];
+
+      var $option = this.option(item);
+
+      $options.push($option);
     }
 
+    this.$results.append($options);
+  };
+
+  Results.prototype.option = function (data) {
+    var $option = $(
+      '<li class="option"></li>'
+    );
+
+    $option.html(data.text);
+    $option.data("data", data);
+
+    return $option;
+  }
+
+  Results.prototype.bind = function ($container) {
+    var self = this;
+
+    this.on("results:all", function (data) {
+      self.clear();
+      self.append(data);
+    });
+
+    this.on("results:append", function (data) {
+      self.append(data);
+    })
+
+    this.$results.on("click", ".option", function (evt) {
+      var data = $(this).data("data");
+
+      self.trigger("selected", {
+        originalEvent: evt,
+        data: data
+      })
+    });
+  };
+
   return Results;
 })
 ;
@@ -708,15 +796,10 @@ define('select2/core',[
 
     // Bind events
 
-    this.selection.bind($container);
-
-    // Set the initial state
-
     var self = this;
 
-    this.data.current(function (initialData) {
+    this.selection.bind($container);
-      self.selection.update(initialData);
+    this.results.bind($container);
-    });
 
     this.$element.on("change", function () {
       self.data.current(function (data) {
@@ -727,6 +810,21 @@ define('select2/core',[
     this.selection.on("toggle", function () {
       $container.toggleClass("open");
     });
+
+    this.results.on("selected", function (params) {
+      self.data.select(params.data);
+      $container.removeClass("open");
+    });
+
+    // Set the initial state
+
+    this.data.current(function (initialData) {
+      self.selection.update(initialData);
+    });
+
+    this.data.query({}, function (data) {
+      self.results.trigger("results:all", data);
+    });
   };
 
   Utils.Extend(Select2, Utils.Observable);

src/js/select2/core.js

@@ -42,15 +42,10 @@ define([
 
     // Bind events
 
-    this.selection.bind($container);
-
-    // Set the initial state
-
     var self = this;
 
-    this.data.current(function (initialData) {
+    this.selection.bind($container);
-      self.selection.update(initialData);
+    this.results.bind($container);
-    });
 
     this.$element.on("change", function () {
       self.data.current(function (data) {
@@ -61,6 +56,21 @@ define([
     this.selection.on("toggle", function () {
       $container.toggleClass("open");
     });
+
+    this.results.on("selected", function (params) {
+      self.data.select(params.data);
+      $container.removeClass("open");
+    });
+
+    // Set the initial state
+
+    this.data.current(function (initialData) {
+      self.selection.update(initialData);
+    });
+
+    this.data.query({}, function (data) {
+      self.results.trigger("results:all", data);
+    });
   };
 
   Utils.Extend(Select2, Utils.Observable);

src/js/select2/data/select.js

@@ -1,8 +1,11 @@
 define([
-  '../utils'
+  '../utils',
-], function (Utils) {
+  'jquery'
+], function (Utils, $) {
   function SelectAdapter ($element, options) {
     this.$element = $element;
+
+    SelectAdapter.__super__.constructor.call(this);
   }
 
   Utils.Extend(SelectAdapter, Utils.Observable);
@@ -22,6 +25,32 @@ define([
     callback(data);
   };
 
+  SelectAdapter.prototype.select = function (data) {
+    var val;
+
+    if (this.$element.prop("multiple")) {
+      var currentData = this.current();
+
+      data = [data];
+      data.push(currentData);
+
+      val = [];
+
+      for (var d = 0; d < data.length; d++) {
+        id = data[d].id;
+
+        if (ids.indexOf(id) === -1) {
+          val.push(id);
+        }
+      }
+    } else {
+      val = data.id;
+    }
+
+    this.$element.val(val);
+    this.$element.trigger("change");
+  }
+
   SelectAdapter.prototype.query = function (params, callback) {
     var data = [];
     var self = this;
@@ -49,6 +78,10 @@ define([
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    if ($.trim(params.term) == "") {
+      return true;
+    }
+
     if (data.text.indexOf(params.term) > -1) {
       return true;
     }

src/js/select2/results.js

@@ -3,7 +3,9 @@ define([
 ], function (Utils) {
   function Results ($element, dataAdapter) {
     this.$element = $element;
-    this.dataAdapter = dataAdapter;
+    this.data = dataAdapter;
+
+    Results.__super__.constructor.call(this);
   }
 
   Utils.Extend(Results, Utils.Observable);
@@ -13,8 +15,61 @@ define([
       '<ul class="options"></ul>'
     );
 
+    this.$results = $results;
+
     return $results;
+  };
+
+  Results.prototype.clear = function () {
+    this.$results.empty();
+  };
+
+  Results.prototype.append = function (data) {
+    var $options = [];
+
+    for (var d = 0; d < data.length; d++) {
+      var item = data[d];
+
+      var $option = this.option(item);
+
+      $options.push($option);
     }
 
+    this.$results.append($options);
+  };
+
+  Results.prototype.option = function (data) {
+    var $option = $(
+      '<li class="option"></li>'
+    );
+
+    $option.html(data.text);
+    $option.data("data", data);
+
+    return $option;
+  }
+
+  Results.prototype.bind = function ($container) {
+    var self = this;
+
+    this.on("results:all", function (data) {
+      self.clear();
+      self.append(data);
+    });
+
+    this.on("results:append", function (data) {
+      self.append(data);
+    })
+
+    this.$results.on("click", ".option", function (evt) {
+      var data = $(this).data("data");
+
+      self.trigger("selected", {
+        originalEvent: evt,
+        data: data
+      })
+    });
+  };
+
   return Results;
 })

src/scss/_dropdown.scss

@@ -1,10 +1,42 @@
 .select2-container {
   .dropdown {
     background-color: white;
+
     border: 1px solid #aaa;
+    border-radius: 4px;
+
+    box-sizing: border-box;
+
+    display: block;
+
+    max-height: 200px;
+    overflow-y: scroll;
+
+    position: absolute;
+    left: -100000px;
+    top: -100000px;
+
+    width: 100%;
+
+    .results {
+      .options {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        .option {
+          cursor: pointer;
+          padding: 6px;
+        }
+      }
+    }
   }
 
   &.open .dropdown {
-    //
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    left: 0;
+    top: 28px;
   }
 }

src/scss/_single.scss

@@ -18,4 +18,12 @@
       text-overflow: ellipsis;
     }
   }
+
+  &.open {
+    .selection .single-select {
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
 }

src/scss/core.scss

@@ -8,6 +8,7 @@
 }
 
 @import "single";
+@import "dropdown";
 
 .s2-container {
   margin: 0;