Merge pull request #12 from mycolorway/scl-add-optgroup-for-simple-se…

…lect

ADD: optgroup support

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-select",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "homepage": "https://github.com/mycolorway/simple-select",
   "authors": [
     "kshift <[email protected]>"

demo.html

@@ -69,6 +69,32 @@
             select.on('select', function(e, item) {
                 select.el.after("<p>" + item.label + "</p>");
             });
+
+            var select = simple.select({
+                el: $('#select-four'),
+                placeholder: 'type sth...',
+            });
+
+            select.setItems({
+              "SwedishCars": [{
+                label: "Volvo",
+                key: "volvo",
+                id: "1"
+              }, {
+                label: "saab",
+                key: "Saab",
+                id: "1"
+              }],
+              "GermanCars": [{
+                label: "Mercedes",
+                key: "mercedes",
+                id: "1"
+              }, {
+                label: "Audi",
+                key: "audi",
+                id: "1"
+              }]
+            });
         });
     </script>
 
@@ -78,9 +104,14 @@
         <div class="demo-one">
             <h3>Demo one: multiline as false</h3>
             <select id="select-one">
-                <option value="0" data-hint="#1" data-key="George Washington">George Washington</option>
-                <option value="1" data-hint="#2" data-key="John Adams">John Adams</option>
-                <option value="2" data-hint="#3" data-key="Thomas Jefferson">Thomas Jefferson Juan Mata</option>
+              <optgroup label="Swedish Cars">
+                <option value="volvo">Volvo</option>
+                <option value="saab">Saab</option>
+              </optgroup>
+              <optgroup label="German Cars">
+                <option value="mercedes">Mercedes</option>
+                <option value="audi">Audi</option>
+              </optgroup>
             </select>
         </div>
 
@@ -100,6 +131,12 @@ <h3>Demo three: with non value option</h3>
                 <option value="2" data-key="Thomas Jefferson">Thomas Jefferson Thomas Jefferson Thomas Jefferson</option>
             </select>
         </div>
+
+        <div class="demo-four">
+            <h3>Demo Four: call setItems with object</h3>
+            <select id="select-four">
+            </select>
+        </div>
     </div>
 </body>
 </html>

lib/select.js

@@ -51,7 +51,8 @@ Select = (function(superClass) {
   Select._tpl = {
     textarea: "<textarea rows=1 type=\"text\" class=\"select-result\" autocomplete=\"off\"></textarea>",
     input: "<input type=\"text\" class=\"select-result\" autocomplete=\"off\">",
-    item: "<div class=\"select-item\">\n  <a href=\"javascript:;\" class=\"label\"><span></span></a>\n  <span class=\"hint\"></span>\n</div>"
+    item: "<div class=\"select-item\">\n  <a href=\"javascript:;\" class=\"label\"><span></span></a>\n  <span class=\"hint\"></span>\n</div>",
+    group: "<div class=\"select-group\">\n</div>"
   };
 
   Select.prototype._init = function() {
@@ -83,24 +84,46 @@ Select = (function(superClass) {
     this.input = $(inputTpl).attr("placeholder", this.opts.placeholder || this.el.data('placeholder') || "").prependTo(this.select);
     this.list = this.select.find(".select-list");
     this.requireSelect = true;
-    this.items = this.el.find("option").map((function(_this) {
+    this._setGroupsItems();
+    this.generateList();
+    return this.select.toggleClass('require-select', this.requireSelect);
+  };
+
+  Select.prototype._setGroupsItems = function() {
+    this.groups = false;
+    return this.items = this.el.find("option").map((function(_this) {
       return function(i, option) {
-        var $option, label, value;
+        var $group, $option, groupLabel, item;
         $option = $(option);
-        value = $option.attr('value');
-        label = $option.text().trim();
-        if (!value) {
-          _this.requireSelect = false;
-          return;
+        $group = $option.parent('optgroup');
+        item = _this._item($option);
+        if ($group.length !== 0) {
+          if (_this.groups === false) {
+            _this.groups = {};
+          }
+          groupLabel = $group.attr('label');
+          if (!$.isArray(_this.groups[groupLabel])) {
+            _this.groups[groupLabel] = [];
+          }
+          _this.groups[groupLabel].push(item);
         }
-        return $.extend({
-          label: label,
-          _value: value
-        }, $option.data());
+        return item;
       };
     })(this)).get();
-    this.generateList();
-    return this.select.toggleClass('require-select', this.requireSelect);
+  };
+
+  Select.prototype._item = function($option) {
+    var label, value;
+    value = $option.attr('value');
+    label = $option.text().trim();
+    if (!value) {
+      this.requireSelect = false;
+      return;
+    }
+    return $.extend({
+      label: label,
+      _value: value
+    }, $option.data());
   };
 
   Select.prototype._expand = function(expand) {
@@ -359,15 +382,36 @@ Select = (function(superClass) {
   Select.prototype.generateList = function() {
     var $itemEl, idx, it, item, j, k, len, len1, ref, ref1, results1;
     this.list.empty();
-    ref = this.items;
-    for (j = 0, len = ref.length; j < len; j++) {
-      item = ref[j];
-      $itemEl = $(Select._tpl.item).data(item);
-      $itemEl.find(".label span").text(item.label);
-      $itemEl.find(".hint").text(item.hint);
-      this.list.append($itemEl);
-      if ($.isFunction(this.opts.onItemRender)) {
-        this.opts.onItemRender.call(this, $itemEl, item);
+    if (this.groups) {
+      $.each(this.groups, (function(_this) {
+        return function(groupLabel, items) {
+          var $groupEl, $itemEl, item, j, len, results1;
+          $groupEl = $(Select._tpl.group);
+          $groupEl.text(groupLabel);
+          _this.list.append($groupEl);
+          results1 = [];
+          for (j = 0, len = items.length; j < len; j++) {
+            item = items[j];
+            $itemEl = _this._itemEl(item);
+            _this.list.append($itemEl);
+            if ($.isFunction(_this.opts.onItemRender)) {
+              results1.push(_this.opts.onItemRender.call(_this, $itemEl, item));
+            } else {
+              results1.push(void 0);
+            }
+          }
+          return results1;
+        };
+      })(this));
+    } else {
+      ref = this.items;
+      for (j = 0, len = ref.length; j < len; j++) {
+        item = ref[j];
+        $itemEl = this._itemEl(item);
+        this.list.append($itemEl);
+        if ($.isFunction(this.opts.onItemRender)) {
+          this.opts.onItemRender.call(this, $itemEl, item);
+        }
       }
     }
     ref1 = this.items;
@@ -384,25 +428,49 @@ Select = (function(superClass) {
     return results1;
   };
 
+  Select.prototype._itemEl = function(item) {
+    var $itemEl;
+    $itemEl = $(Select._tpl.item).data(item);
+    $itemEl.find(".label span").text(item.label);
+    $itemEl.find(".hint").text(item.hint);
+    return $itemEl;
+  };
+
   Select.prototype.setItems = function(items, requireSelect) {
     var item, j, len;
     if (requireSelect == null) {
       requireSelect = true;
     }
-    this.items = items;
+    this.items = [];
     this.clearSelection();
     this.list.empty();
     this.el.empty();
+    this.requireSelect = requireSelect;
+    this.select.toggleClass('require-select', this.requireSelect);
+    if (!this.requireSelect) {
+      this.el.prepend('<option></option>');
+    }
     if ($.isArray(items) && items.length > 0) {
-      this.requireSelect = requireSelect;
-      this.select.toggleClass('require-select', this.requireSelect);
-      if (!this.requireSelect) {
-        this.el.prepend('<option></option>');
-      }
       for (j = 0, len = items.length; j < len; j++) {
         item = items[j];
         this.el.append("<option value=\"" + item._value + "\">" + item.label + "</option>");
       }
+      this._setGroupsItems();
+      this.generateList();
+    }
+    if ($.type(items) === 'object') {
+      $.each(items, (function(_this) {
+        return function(groupLabel, items) {
+          var $group, k, len1;
+          $group = $("<optgroup label=" + groupLabel + "></optgroup>");
+          for (k = 0, len1 = items.length; k < len1; k++) {
+            item = items[k];
+            $group.append("<option value=\"" + item._value + "\">" + item.label + "</option>");
+          }
+          return _this.el.append($group);
+        };
+      })(this));
+      this._setGroupsItems();
       return this.generateList();
     }
   };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-select",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "a simple select plugin based on Simple Module",
   "main": "lib/select.js",
   "repository": {

src/select.coffee

@@ -34,6 +34,11 @@ class Select extends SimpleModule
       </div>
     """
 
+    group: """
+      <div class="select-group">
+      </div>
+    """
+
   _init: ->
     unless @opts.el
       throw "simple select: option el is required"
@@ -78,23 +83,40 @@ class Select extends SimpleModule
     @list = @select.find ".select-list"
 
     @requireSelect = true
+
+    @_setGroupsItems()
+    @generateList()
+    @select.toggleClass 'require-select', @requireSelect
+
+  _setGroupsItems: () ->
+    @groups = false
+
     @items = @el.find("option").map (i, option) =>
       $option = $(option)
-      value = $option.attr 'value'
-      label = $option.text().trim()
+      $group = $option.parent('optgroup')
+      item = @_item $option
+      if $group.length isnt 0
+        @groups = {} if @groups is false
+        groupLabel = $group.attr('label')
+        @groups[groupLabel] = [] unless $.isArray(@groups[groupLabel])
+        @groups[groupLabel].push(item)
+      item
+    .get()
 
-      unless value
-        @requireSelect = false
-        return
 
-      $.extend({
-        label: label,
-        _value: value
-      }, $option.data())
-    .get()
+  _item: ($option) ->
+    value = $option.attr 'value'
+    label = $option.text().trim()
+
+    unless value
+      @requireSelect = false
+      return
+
+    $.extend({
+      label: label,
+      _value: value
+    }, $option.data())
 
-    @generateList()
-    @select.toggleClass 'require-select', @requireSelect
 
   _expand: (expand) ->
     if expand is false
@@ -285,32 +307,55 @@ class Select extends SimpleModule
 
   generateList: ->
     @list.empty()
-    for item in @items
-      $itemEl = $(Select._tpl.item).data(item)
-      $itemEl.find(".label span").text(item.label)
-      $itemEl.find(".hint").text(item.hint)
-
-      @list.append $itemEl
-      @opts.onItemRender.call(@, $itemEl, item)  if $.isFunction @opts.onItemRender
+    if @groups
+      $.each @groups, (groupLabel, items) =>
+        $groupEl = $(Select._tpl.group)
+        $groupEl.text(groupLabel)
+        @list.append($groupEl)
+        for item in items
+          $itemEl = @_itemEl(item)
+          @list.append($itemEl)
+          @opts.onItemRender.call(@, $itemEl, item)  if $.isFunction @opts.onItemRender
+    else
+      for item in @items
+        $itemEl = @_itemEl(item)
+        @list.append $itemEl
+        @opts.onItemRender.call(@, $itemEl, item)  if $.isFunction @opts.onItemRender
 
     for it, idx in @items
       if it._value is @el.val()
         @selectItem idx
         break
 
+  _itemEl: (item) ->
+    $itemEl = $(Select._tpl.item).data(item)
+    $itemEl.find(".label span").text(item.label)
+    $itemEl.find(".hint").text(item.hint)
+    $itemEl
+
   setItems: (items, requireSelect = true) ->
-    @items = items
+    @items = []
     @clearSelection()
     @list.empty()
     @el.empty()
 
+    @requireSelect = requireSelect
+    @select.toggleClass 'require-select', @requireSelect
+    @el.prepend('<option></option>') unless @requireSelect
+
     if $.isArray(items) && items.length > 0
-      @requireSelect = requireSelect
-      @select.toggleClass 'require-select', @requireSelect
-      @el.prepend('<option></option>') unless @requireSelect
       for item in items
         @el.append("<option value=\"#{item._value}\">#{item.label}</option>")
+      @_setGroupsItems()
+      @generateList()
 
+    if $.type(items) is 'object'
+      $.each items, (groupLabel, items) =>
+        $group = $("<optgroup label=#{groupLabel}></optgroup>")
+        for item in items
+          $group.append("<option value=\"#{item._value}\">#{item.label}</option>")
+        @el.append($group)
+      @_setGroupsItems()
       @generateList()
 
   selectItem: (index) ->