Added optgroup support

dist/css/select2.css

@@ -88,9 +88,15 @@
 .select2-container.select2-theme-default .dropdown .results {
   max-height: 200px;
   overflow-y: scroll; }
+  .select2-container.select2-theme-default .dropdown .results .options .option.group {
+    padding: 0; }
+    .select2-container.select2-theme-default .dropdown .results .options .option.group .group-label {
+      cursor: default;
+      display: block;
+      padding: 6px; }
   .select2-container.select2-theme-default .dropdown .results .options .option.selected {
     background-color: #ddd; }
-  .select2-container.select2-theme-default .dropdown .results .options .option.highlighted {
+  .select2-container.select2-theme-default .dropdown .results .options .option.highlightable.highlighted {
     background-color: #5897fb;
     color: white; }
 

dist/css/select2.min.css

@@ -1 +1 @@
-.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-container .selection .single-select{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-container .selection .single-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .selection .multiple-select{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .selection .multiple-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{cursor:pointer;padding:6px;user-select:none;-webkit-user-select:none;}.select2-container.open .dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-container.select2-theme-default .selection .single-select{background-color:#eee;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-default .selection .multiple-select{background-color:white;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection{list-style:none;margin:0;padding:5px;padding-bottom:0;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;float:left;margin-right:5px;margin-bottom:5px;padding:0 5px;}.select2-container.select2-theme-default.open .selection .single-select,.select2-container.select2-theme-default.open .selection .multiple-select{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-default .dropdown .results{max-height:200px;overflow-y:scroll;}.select2-container.select2-theme-default .dropdown .results .options .option.selected{background-color:#ddd;}.select2-container.select2-theme-default .dropdown .results .options .option.highlighted{background-color:#5897fb;color:white;}.s2-container{margin:0;position:relative;zoom:1;vertical-align:middle;}.s2-container.s2-active{border:1px solid #5897fb;border-top:bottom;}.s2-container .s2-single-select{display:block;height:26px;padding:0 0 0 8px;overflow:hidden;position:relative;border:1px solid #aaa;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;border-radius:4px;background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));background-image:-webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);background-image:-moz-linear-gradient(center bottom, #eee 0%, #fff 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);background-image:linear-gradient(to top, #eee 0%, #fff 50%);}.s2-container .s2-single-select .s2-selection{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.s2-container .s2-open .select2-container-active .select2-choice,.s2-container .s2-open .select2-container-active .select2-choices{border:1px solid #5897fb;outline:none;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px rgba(0, 0, 0, 0.3);}.s2-search input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.s2-dropdown{width:100%;margin-top:-1px;position:absolute;z-index:9999;overflow:scroll;background:#fff;color:#000;border:1px solid #5897fb;border-top:none;border-radius:0 0 4px 4px;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);}.s2-hidden{display:none;}
+.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-container .selection .single-select{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-container .selection .single-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .selection .multiple-select{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .selection .multiple-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{cursor:pointer;padding:6px;user-select:none;-webkit-user-select:none;}.select2-container.open .dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-container.select2-theme-default .selection .single-select{background-color:#eee;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-default .selection .multiple-select{background-color:white;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection{list-style:none;margin:0;padding:5px;padding-bottom:0;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;float:left;margin-right:5px;margin-bottom:5px;padding:0 5px;}.select2-container.select2-theme-default.open .selection .single-select,.select2-container.select2-theme-default.open .selection .multiple-select{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-default .dropdown .results{max-height:200px;overflow-y:scroll;}.select2-container.select2-theme-default .dropdown .results .options .option.group{padding:0;}.select2-container.select2-theme-default .dropdown .results .options .option.group .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-default .dropdown .results .options .option.selected{background-color:#ddd;}.select2-container.select2-theme-default .dropdown .results .options .option.highlightable.highlighted{background-color:#5897fb;color:white;}.s2-container{margin:0;position:relative;zoom:1;vertical-align:middle;}.s2-container.s2-active{border:1px solid #5897fb;border-top:bottom;}.s2-container .s2-single-select{display:block;height:26px;padding:0 0 0 8px;overflow:hidden;position:relative;border:1px solid #aaa;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;border-radius:4px;background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));background-image:-webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);background-image:-moz-linear-gradient(center bottom, #eee 0%, #fff 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);background-image:linear-gradient(to top, #eee 0%, #fff 50%);}.s2-container .s2-single-select .s2-selection{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.s2-container .s2-open .select2-container-active .select2-choice,.s2-container .s2-open .select2-container-active .select2-choices{border:1px solid #5897fb;outline:none;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px rgba(0, 0, 0, 0.3);}.s2-search input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.s2-dropdown{width:100%;margin-top:-1px;position:absolute;z-index:9999;overflow:scroll;background:#fff;color:#000;border:1px solid #5897fb;border-top:none;border-radius:0 0 4px 4px;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);}.s2-hidden{display:none;}

dist/js/select2.amd.full.js

@@ -200,10 +200,39 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var $option = $(
-      '<li class="option"></li>'
+      '<li class="option highlightable selectable"></li>'
     );
 
+    if (data.children && data.children.length > 0) {
+      $option.addClass('group').removeClass('highlightable selectable');
+
+      var $label = $('<strong class="group-label"></strong>');
+      $label.html(data.text);
+
+      var $children = [];
+
+      for (var c = 0; c < data.children.length; c++) {
+        var child = data.children[c];
+
+        var $child = this.option(child);
+
+        $children.push($child);
+      }
+
+      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+
+      $childrenContainer.append($children);
+
+      $option.append($label);
+      $option.append($childrenContainer);
+    } else {
       $option.html(data.text);
+    }
+
+    if (data.disabled) {
+      $option.removeClass('selectable').addClass('disabled');
+    }
+
     $option.data('data', data);
 
     return $option;
@@ -225,7 +254,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseup', '.option', function (evt) {
+    this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -248,7 +277,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseenter', '.option', function (evt) {
+    this.$results.on('mouseenter', '.option.highlightable', function (evt) {
       self.$results.find('.option.highlighted').removeClass('highlighted');
       $(this).addClass('highlighted');
     });
@@ -540,13 +569,21 @@ define('select2/data/select',[
     var data = [];
     var self = this;
 
-    this.$element.find('option').each(function () {
+    var $options = this.$element.children();
+
+    $options.each(function () {
       var $option = $(this);
 
+      if (!$option.is('option') && !$option.is('optgroup')) {
+        return;
+      }
+
       var option = self.item($option);
 
-      if (self.matches(params, option)) {
-        data.push(option);
+      var matches = self.matches(params, option);
+
+      if (matches !== null) {
+        data.push(matches);
       }
     });
 
@@ -558,10 +595,32 @@ define('select2/data/select',[
 
     // If the data has already be generated, use it
     if (data == null) {
+      if ($option.is('option')) {
         data = {
           id: $option.val(),
-        text: $option.html()
+          text: $option.html(),
+          disabled: $option.prop('disabled')
         };
+      } else if ($option.is('optgroup')) {
+        data = {
+          id: -1,
+          text: $option.attr('label'),
+          children: []
+        };
+
+        var $children = $option.children('option');
+        var children = [];
+
+        for (var c = 0; c < $children.length; c++) {
+          var $child = $($children[c]);
+
+          var child = this.item($child);
+
+          children.push(child);
+        }
+
+        data.children = children;
+      }
 
       $option.data('data', data);
     }
@@ -570,15 +629,34 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    var match = $.extend(true, {}, data);
+
+    if (data.children) {
+      for (var c = data.children.length - 1; c >= 0; c--) {
+        var child = data.children[c];
+
+        var matches = this.matches(params, child);
+
+        // If there wasn't a match, remove the object in the array
+        if (matches === null) {
+          match.children.splice(c, 1);
+        }
+      }
+
+      if (match.children.length > 0) {
+        return match;
+      }
+    }
+
     if ($.trim(params.term) === '') {
-      return true;
+      return match;
     }
 
     if (data.text.indexOf(params.term) > -1) {
-      return true;
+      return match;
     }
 
-    return false;
+    return null;
   };
 
   return SelectAdapter;

dist/js/select2.amd.js

@@ -200,10 +200,39 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var $option = $(
-      '<li class="option"></li>'
+      '<li class="option highlightable selectable"></li>'
     );
 
+    if (data.children && data.children.length > 0) {
+      $option.addClass('group').removeClass('highlightable selectable');
+
+      var $label = $('<strong class="group-label"></strong>');
+      $label.html(data.text);
+
+      var $children = [];
+
+      for (var c = 0; c < data.children.length; c++) {
+        var child = data.children[c];
+
+        var $child = this.option(child);
+
+        $children.push($child);
+      }
+
+      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+
+      $childrenContainer.append($children);
+
+      $option.append($label);
+      $option.append($childrenContainer);
+    } else {
       $option.html(data.text);
+    }
+
+    if (data.disabled) {
+      $option.removeClass('selectable').addClass('disabled');
+    }
+
     $option.data('data', data);
 
     return $option;
@@ -225,7 +254,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseup', '.option', function (evt) {
+    this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -248,7 +277,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseenter', '.option', function (evt) {
+    this.$results.on('mouseenter', '.option.highlightable', function (evt) {
       self.$results.find('.option.highlighted').removeClass('highlighted');
       $(this).addClass('highlighted');
     });
@@ -540,13 +569,21 @@ define('select2/data/select',[
     var data = [];
     var self = this;
 
-    this.$element.find('option').each(function () {
+    var $options = this.$element.children();
+
+    $options.each(function () {
       var $option = $(this);
 
+      if (!$option.is('option') && !$option.is('optgroup')) {
+        return;
+      }
+
       var option = self.item($option);
 
-      if (self.matches(params, option)) {
-        data.push(option);
+      var matches = self.matches(params, option);
+
+      if (matches !== null) {
+        data.push(matches);
       }
     });
 
@@ -558,10 +595,32 @@ define('select2/data/select',[
 
     // If the data has already be generated, use it
     if (data == null) {
+      if ($option.is('option')) {
         data = {
           id: $option.val(),
-        text: $option.html()
+          text: $option.html(),
+          disabled: $option.prop('disabled')
         };
+      } else if ($option.is('optgroup')) {
+        data = {
+          id: -1,
+          text: $option.attr('label'),
+          children: []
+        };
+
+        var $children = $option.children('option');
+        var children = [];
+
+        for (var c = 0; c < $children.length; c++) {
+          var $child = $($children[c]);
+
+          var child = this.item($child);
+
+          children.push(child);
+        }
+
+        data.children = children;
+      }
 
       $option.data('data', data);
     }
@@ -570,15 +629,34 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    var match = $.extend(true, {}, data);
+
+    if (data.children) {
+      for (var c = data.children.length - 1; c >= 0; c--) {
+        var child = data.children[c];
+
+        var matches = this.matches(params, child);
+
+        // If there wasn't a match, remove the object in the array
+        if (matches === null) {
+          match.children.splice(c, 1);
+        }
+      }
+
+      if (match.children.length > 0) {
+        return match;
+      }
+    }
+
     if ($.trim(params.term) === '') {
-      return true;
+      return match;
     }
 
     if (data.text.indexOf(params.term) > -1) {
-      return true;
+      return match;
     }
 
-    return false;
+    return null;
   };
 
   return SelectAdapter;

dist/js/select2.full.js

@@ -9738,10 +9738,39 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var $option = $(
-      '<li class="option"></li>'
+      '<li class="option highlightable selectable"></li>'
     );
 
+    if (data.children && data.children.length > 0) {
+      $option.addClass('group').removeClass('highlightable selectable');
+
+      var $label = $('<strong class="group-label"></strong>');
+      $label.html(data.text);
+
+      var $children = [];
+
+      for (var c = 0; c < data.children.length; c++) {
+        var child = data.children[c];
+
+        var $child = this.option(child);
+
+        $children.push($child);
+      }
+
+      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+
+      $childrenContainer.append($children);
+
+      $option.append($label);
+      $option.append($childrenContainer);
+    } else {
       $option.html(data.text);
+    }
+
+    if (data.disabled) {
+      $option.removeClass('selectable').addClass('disabled');
+    }
+
     $option.data('data', data);
 
     return $option;
@@ -9763,7 +9792,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseup', '.option', function (evt) {
+    this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -9786,7 +9815,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseenter', '.option', function (evt) {
+    this.$results.on('mouseenter', '.option.highlightable', function (evt) {
       self.$results.find('.option.highlighted').removeClass('highlighted');
       $(this).addClass('highlighted');
     });
@@ -10078,13 +10107,21 @@ define('select2/data/select',[
     var data = [];
     var self = this;
 
-    this.$element.find('option').each(function () {
+    var $options = this.$element.children();
+
+    $options.each(function () {
       var $option = $(this);
 
+      if (!$option.is('option') && !$option.is('optgroup')) {
+        return;
+      }
+
       var option = self.item($option);
 
-      if (self.matches(params, option)) {
-        data.push(option);
+      var matches = self.matches(params, option);
+
+      if (matches !== null) {
+        data.push(matches);
       }
     });
 
@@ -10096,10 +10133,32 @@ define('select2/data/select',[
 
     // If the data has already be generated, use it
     if (data == null) {
+      if ($option.is('option')) {
         data = {
           id: $option.val(),
-        text: $option.html()
+          text: $option.html(),
+          disabled: $option.prop('disabled')
         };
+      } else if ($option.is('optgroup')) {
+        data = {
+          id: -1,
+          text: $option.attr('label'),
+          children: []
+        };
+
+        var $children = $option.children('option');
+        var children = [];
+
+        for (var c = 0; c < $children.length; c++) {
+          var $child = $($children[c]);
+
+          var child = this.item($child);
+
+          children.push(child);
+        }
+
+        data.children = children;
+      }
 
       $option.data('data', data);
     }
@@ -10108,15 +10167,34 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    var match = $.extend(true, {}, data);
+
+    if (data.children) {
+      for (var c = data.children.length - 1; c >= 0; c--) {
+        var child = data.children[c];
+
+        var matches = this.matches(params, child);
+
+        // If there wasn't a match, remove the object in the array
+        if (matches === null) {
+          match.children.splice(c, 1);
+        }
+      }
+
+      if (match.children.length > 0) {
+        return match;
+      }
+    }
+
     if ($.trim(params.term) === '') {
-      return true;
+      return match;
     }
 
     if (data.text.indexOf(params.term) > -1) {
-      return true;
+      return match;
     }
 
-    return false;
+    return null;
   };
 
   return SelectAdapter;

dist/js/select2.js

@@ -629,10 +629,39 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var $option = $(
-      '<li class="option"></li>'
+      '<li class="option highlightable selectable"></li>'
     );
 
+    if (data.children && data.children.length > 0) {
+      $option.addClass('group').removeClass('highlightable selectable');
+
+      var $label = $('<strong class="group-label"></strong>');
+      $label.html(data.text);
+
+      var $children = [];
+
+      for (var c = 0; c < data.children.length; c++) {
+        var child = data.children[c];
+
+        var $child = this.option(child);
+
+        $children.push($child);
+      }
+
+      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+
+      $childrenContainer.append($children);
+
+      $option.append($label);
+      $option.append($childrenContainer);
+    } else {
       $option.html(data.text);
+    }
+
+    if (data.disabled) {
+      $option.removeClass('selectable').addClass('disabled');
+    }
+
     $option.data('data', data);
 
     return $option;
@@ -654,7 +683,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseup', '.option', function (evt) {
+    this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -677,7 +706,7 @@ define('select2/results',[
       self.setClasses();
     });
 
-    this.$results.on('mouseenter', '.option', function (evt) {
+    this.$results.on('mouseenter', '.option.highlightable', function (evt) {
       self.$results.find('.option.highlighted').removeClass('highlighted');
       $(this).addClass('highlighted');
     });
@@ -969,13 +998,21 @@ define('select2/data/select',[
     var data = [];
     var self = this;
 
-    this.$element.find('option').each(function () {
+    var $options = this.$element.children();
+
+    $options.each(function () {
       var $option = $(this);
 
+      if (!$option.is('option') && !$option.is('optgroup')) {
+        return;
+      }
+
       var option = self.item($option);
 
-      if (self.matches(params, option)) {
-        data.push(option);
+      var matches = self.matches(params, option);
+
+      if (matches !== null) {
+        data.push(matches);
       }
     });
 
@@ -987,10 +1024,32 @@ define('select2/data/select',[
 
     // If the data has already be generated, use it
     if (data == null) {
+      if ($option.is('option')) {
         data = {
           id: $option.val(),
-        text: $option.html()
+          text: $option.html(),
+          disabled: $option.prop('disabled')
         };
+      } else if ($option.is('optgroup')) {
+        data = {
+          id: -1,
+          text: $option.attr('label'),
+          children: []
+        };
+
+        var $children = $option.children('option');
+        var children = [];
+
+        for (var c = 0; c < $children.length; c++) {
+          var $child = $($children[c]);
+
+          var child = this.item($child);
+
+          children.push(child);
+        }
+
+        data.children = children;
+      }
 
       $option.data('data', data);
     }
@@ -999,15 +1058,34 @@ define('select2/data/select',[
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    var match = $.extend(true, {}, data);
+
+    if (data.children) {
+      for (var c = data.children.length - 1; c >= 0; c--) {
+        var child = data.children[c];
+
+        var matches = this.matches(params, child);
+
+        // If there wasn't a match, remove the object in the array
+        if (matches === null) {
+          match.children.splice(c, 1);
+        }
+      }
+
+      if (match.children.length > 0) {
+        return match;
+      }
+    }
+
     if ($.trim(params.term) === '') {
-      return true;
+      return match;
     }
 
     if (data.text.indexOf(params.term) > -1) {
-      return true;
+      return match;
     }
 
-    return false;
+    return null;
   };
 
   return SelectAdapter;

docs/_includes/head.html

@@ -6,7 +6,7 @@
   {{ page.title }}
 </title>
 
-<script type="text/javascript" src="dist/js/select2.full.min.js"></script>
+<script type="text/javascript" src="dist/js/select2.full.js"></script>
 <script type="text/javascript" src="vendor/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="vendor/js/prettify.min.js"></script>
 

src/js/select2/data/select.js

@@ -94,13 +94,21 @@ define([
     var data = [];
     var self = this;
 
-    this.$element.find('option').each(function () {
+    var $options = this.$element.children();
+
+    $options.each(function () {
       var $option = $(this);
 
+      if (!$option.is('option') && !$option.is('optgroup')) {
+        return;
+      }
+
       var option = self.item($option);
 
-      if (self.matches(params, option)) {
-        data.push(option);
+      var matches = self.matches(params, option);
+
+      if (matches !== null) {
+        data.push(matches);
       }
     });
 
@@ -112,10 +120,32 @@ define([
 
     // If the data has already be generated, use it
     if (data == null) {
+      if ($option.is('option')) {
         data = {
           id: $option.val(),
-        text: $option.html()
+          text: $option.html(),
+          disabled: $option.prop('disabled')
         };
+      } else if ($option.is('optgroup')) {
+        data = {
+          id: -1,
+          text: $option.attr('label'),
+          children: []
+        };
+
+        var $children = $option.children('option');
+        var children = [];
+
+        for (var c = 0; c < $children.length; c++) {
+          var $child = $($children[c]);
+
+          var child = this.item($child);
+
+          children.push(child);
+        }
+
+        data.children = children;
+      }
 
       $option.data('data', data);
     }
@@ -124,15 +154,34 @@ define([
   };
 
   SelectAdapter.prototype.matches = function (params, data) {
+    var match = $.extend(true, {}, data);
+
+    if (data.children) {
+      for (var c = data.children.length - 1; c >= 0; c--) {
+        var child = data.children[c];
+
+        var matches = this.matches(params, child);
+
+        // If there wasn't a match, remove the object in the array
+        if (matches === null) {
+          match.children.splice(c, 1);
+        }
+      }
+
+      if (match.children.length > 0) {
+        return match;
+      }
+    }
+
     if ($.trim(params.term) === '') {
-      return true;
+      return match;
     }
 
     if (data.text.indexOf(params.term) > -1) {
-      return true;
+      return match;
     }
 
-    return false;
+    return null;
   };
 
   return SelectAdapter;

src/js/select2/results.js

@@ -61,10 +61,39 @@ define([
 
   Results.prototype.option = function (data) {
     var $option = $(
-      '<li class="option"></li>'
+      '<li class="option highlightable selectable"></li>'
     );
 
+    if (data.children && data.children.length > 0) {
+      $option.addClass('group').removeClass('highlightable selectable');
+
+      var $label = $('<strong class="group-label"></strong>');
+      $label.html(data.text);
+
+      var $children = [];
+
+      for (var c = 0; c < data.children.length; c++) {
+        var child = data.children[c];
+
+        var $child = this.option(child);
+
+        $children.push($child);
+      }
+
+      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+
+      $childrenContainer.append($children);
+
+      $option.append($label);
+      $option.append($childrenContainer);
+    } else {
       $option.html(data.text);
+    }
+
+    if (data.disabled) {
+      $option.removeClass('selectable').addClass('disabled');
+    }
+
     $option.data('data', data);
 
     return $option;
@@ -86,7 +115,7 @@ define([
       self.setClasses();
     });
 
-    this.$results.on('mouseup', '.option', function (evt) {
+    this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -109,7 +138,7 @@ define([
       self.setClasses();
     });
 
-    this.$results.on('mouseenter', '.option', function (evt) {
+    this.$results.on('mouseenter', '.option.highlightable', function (evt) {
       self.$results.find('.option.highlighted').removeClass('highlighted');
       $(this).addClass('highlighted');
     });

src/scss/theme/default/layout.scss

@@ -55,11 +55,21 @@
 
       .options {
         .option {
+          &.group {
+            padding: 0;
+
+            .group-label {
+              cursor: default;
+              display: block;
+              padding: 6px;
+            }
+          }
+
           &.selected {
             background-color: #ddd;
           }
 
-          &.highlighted {
+          &.highlightable.highlighted {
             background-color: #5897fb;
             color: white;
           }