Multiple select option item cancel

.gitignore

@@ -6,3 +6,4 @@ tmp
 coverage
 *.sublime-*
 .idea
+package-lock.json

public/index.html

@@ -484,7 +484,7 @@ <h4><a href="./demo.html">view more advanced demos and customization →</a></h4
         </div>
 
         <div class="item">
-          <select multiple>
+          <select multiple option-control=true class="multi-line">
             <option value="">Select with "multiple" attribute</option>
             <option value="ant">Ant</option>
             <option value="bird">Bird</option>
@@ -509,6 +509,24 @@ <h4><a href="./demo.html">view more advanced demos and customization →</a></h4
           </select>
         </div>
 
+        <div class="item">
+          <select multiple>
+            <option>Select with optgroup and multiple</option>
+            <optgroup label="Group 1">
+              <option>Option 1.1</option>
+            </optgroup>
+            <optgroup label="Group 2">
+              <option selected>Option 2.1</option>
+              <option selected>Option 2.2</option>
+            </optgroup>
+            <optgroup label="Group 3" disabled>
+              <option>Option 3.1</option>
+              <option>Option 3.2</option>
+              <option>Option 3.3</option>
+            </optgroup>
+          </select>
+        </div>
+
         <div class="item">
           <select>
             <option>Select with optgroup</option>

public/jquery.selectric.js

@@ -9,7 +9,7 @@
  *    /,'
  *   /'
  *
- * Selectric ϟ v1.13.0 (Aug 22 2017) - http://lcdsantos.github.io/jQuery-Selectric/
+ * Selectric ϟ v1.13.0 (Dec 02 2017) - http://lcdsantos.github.io/jQuery-Selectric/
  *
  * Copyright (c) 2017 Leonardo Santos; MIT License
  *
@@ -74,6 +74,7 @@
 
     _this.state = {
       multiple       : !!_this.$element.attr('multiple'),
+      control        : !!_this.$element.attr('option-control'),
       enabled        : false,
       opened         : false,
       currValue      : -1,
@@ -280,6 +281,14 @@
       _this.populate();
       _this.activate();
 
+      if ( _this.state.control ) {
+        // delegate multiple option cancel
+        _this.elements.label.on('click', '.selectric-item-cancel', function(e) {
+          e.stopPropagation();
+          _this.select($(this).data('index'));
+        });
+      }
+
       _this.utils.triggerCallback('Init', _this);
     },
 
@@ -394,7 +403,17 @@
             labelMarkup.slice(labelMarkup.length - 1);
           }
         }
-        _this.elements.label.html(labelMarkup.join(_this.options.multiple.separator));
+
+        if ( _this.state.control && _this.state.selectedIdx.length ) {
+          _this.elements.label.html($.map(_this.state.selectedIdx, function(item, index) {
+            return $('<span/>',  {
+              class: 'selectric-value-item',
+              html: '<span class="selectric-value">' + labelMarkup[index] + '</span><span class="selectric-item-cancel" data-index="' + item + '">' + _this.options.multiple.icon + '</span>',
+            });
+          }));
+        } else {
+          _this.elements.label.html(labelMarkup.join(_this.options.multiple.separator));
+        }
 
       } else {
         var currItem = _this.lookupItems[_this.state.currValue];
@@ -420,7 +439,7 @@
       if ( $selected.length > 1 && _this.state.multiple ) {
         selectedIndex = [];
         $selected.each(function() {
-          selectedIndex.push($(this).index());
+          selectedIndex.push($(_this.$element.find('option')).index(this));
         });
       }
 
@@ -1119,6 +1138,7 @@
       camelCase: false
     },
     multiple              : {
+      icon: 'x',
       separator: ', ',
       keepMenuOpen: true,
       maxLabelEntries: false

public/plugins/jquery.selectric.addNew.js

@@ -1,4 +1,4 @@
-/*! Selectric AddNew ϟ v0.2.0 (2017-08-22) - git.io/tjl9sQ - Copyright (c) 2017 David Shen (git.io/mhQmLQ) - MIT License */
+/*! Selectric AddNew ϟ v0.2.0 (2017-12-02) - git.io/tjl9sQ - Copyright (c) 2017 David Shen (git.io/mhQmLQ) - MIT License */
 (function(factory) {
   /* global define */
   if ( typeof define === 'function' && define.amd ) {

public/plugins/jquery.selectric.placeholder.js

@@ -1,4 +1,4 @@
-/*! Selectric Placeholder ϟ v0.2.0 (2017-08-22) - git.io/tjl9sQ - Copyright (c) 2017 Leonardo Santos - MIT License */
+/*! Selectric Placeholder ϟ v0.2.0 (2017-12-02) - git.io/tjl9sQ - Copyright (c) 2017 Leonardo Santos - MIT License */
 (function(factory) {
   /* global define */
   if ( typeof define === 'function' && define.amd ) {

public/selectric.css

@@ -35,6 +35,18 @@
           user-select: none;
 }
 
+.selectric .selectric-value-item {
+  margin: 0 5px 0 0;
+  background-color: #FFF;
+  padding: 2px 5px;
+  cursor: default;
+}
+
+.selectric .selectric-value-item .selectric-item-cancel {
+  cursor: pointer;
+  padding-left: 6px;
+}
+
 .selectric .button {
   display: block;
   position: absolute;
@@ -65,6 +77,19 @@
   border-bottom: none;
 }
 
+.selectric-multi-line .selectric .label {
+  height: unset;
+  white-space: normal;
+  overflow: unset;
+  text-overflow: unset;
+  word-break: break-all;
+}
+
+.selectric-multi-line .selectric .selectric-value-item {
+  display: inline-block;
+  line-height: 16px;
+}
+
 .selectric-focus .selectric {
   border-color: #aaaaaa;
 }

src/jquery.selectric.js

@@ -57,6 +57,7 @@
 
     _this.state = {
       multiple       : !!_this.$element.attr('multiple'),
+      control        : !!_this.$element.attr('option-control'),
       enabled        : false,
       opened         : false,
       currValue      : -1,
@@ -263,6 +264,14 @@
       _this.populate();
       _this.activate();
 
+      if ( _this.state.control ) {
+        // delegate multiple option cancel
+        _this.elements.label.on('click', '.selectric-item-cancel', function(e) {
+          e.stopPropagation();
+          _this.select($(this).data('index'));
+        });
+      }
+
       _this.utils.triggerCallback('Init', _this);
     },
 
@@ -377,7 +386,17 @@
             labelMarkup.slice(labelMarkup.length - 1);
           }
         }
-        _this.elements.label.html(labelMarkup.join(_this.options.multiple.separator));
+
+        if ( _this.state.control && _this.state.selectedIdx.length ) {
+          _this.elements.label.html($.map(_this.state.selectedIdx, function(item, index) {
+            return $('<span/>',  {
+              class: 'selectric-value-item',
+              html: '<span class="selectric-value">' + labelMarkup[index] + '</span><span class="selectric-item-cancel" data-index="' + item + '">' + _this.options.multiple.icon + '</span>',
+            });
+          }));
+        } else {
+          _this.elements.label.html(labelMarkup.join(_this.options.multiple.separator));
+        }
 
       } else {
         var currItem = _this.lookupItems[_this.state.currValue];
@@ -403,7 +422,7 @@
       if ( $selected.length > 1 && _this.state.multiple ) {
         selectedIndex = [];
         $selected.each(function() {
-          selectedIndex.push($(this).index());
+          selectedIndex.push($(_this.$element.find('option')).index(this));
         });
       }
 
@@ -1102,6 +1121,7 @@
       camelCase: false
     },
     multiple              : {
+      icon: 'x',
       separator: ', ',
       keepMenuOpen: true,
       maxLabelEntries: false

src/selectric.scss

@@ -3,6 +3,7 @@ $selectric-secondary-color: #BBB !default;
 $selectric-text-color:      #444 !default;                                              // Color used in label
 $selectric-bg-color:        #F8F8F8 !default;                                           // Background color
 $selectric-btn-bg-color:    #F8f8f8 !default;                                           // Button background color
+$selectric-option-bg-color: #FFF !default;                                              // Multiple option background color
 $selectric-height:          40px !default;                                              // Outer height
 $selectric-spacing:         10px !default;                                              // Label left padding
 $selectric-border-width:    1px !default;                                               // Outer border width
@@ -39,6 +40,18 @@ $selectric-font-size:       12px !default;
     user-select: none;
   }
 
+  .selectric-value-item {
+    margin: 0 5px 0 0;
+    background-color: $selectric-option-bg-color;
+    padding: 2px 5px;
+    cursor: default;
+
+    .selectric-item-cancel {
+      cursor: pointer;
+      padding-left: 6px;
+    }
+  }
+
   .button {
     display: block;
     position: absolute;
@@ -70,6 +83,23 @@ $selectric-font-size:       12px !default;
   }
 }
 
+.selectric-multi-line {
+  .selectric {
+    .label {
+      height: unset;
+      white-space: normal;
+      overflow: unset;
+      text-overflow: unset;
+      word-break: break-all;
+    }
+
+    .selectric-value-item {
+      display: inline-block;
+      line-height: 16px;
+    }
+  }
+}
+
 .selectric-focus .selectric {
   border-color: darken($selectric-main-color, 20%);
 }

test/fixtures/optgroup.html

@@ -1,15 +1,15 @@
-<select id="optgroup">
+<select id="optgroup" multiple>
   <option value="0">Select with optgroup</option>
   <optgroup label="Group 1">
     <option>Option 1.1</option>
   </optgroup>
   <optgroup label="Group 2">
-    <option>Option 2.1</option>
+    <option>Option 2.1 selected</option>
     <option>Option 2.2</option>
   </optgroup>
   <optgroup label="Group 3" disabled>
-    <option>Option 3.1</option>
+    <option>Option 3.1 selected</option>
     <option>Option 3.2</option>
     <option>Option 3.3</option>
   </optgroup>
-</select>
+</select>

test/fixtures/optioncontrol.html

@@ -0,0 +1,9 @@
+<select id="multiple" name="animals" multiple option-control=true>
+    <option value="">Please choose...</option>
+    <option value="ant">Ant</option>
+    <option value="cat">Cat</option>
+    <option value="dog">Dog</option>
+    <option value="chicken">Chicken</option>
+    <option value="losabim oxigenium">Losabim Oxigenium</option>
+    <option value="Dagobert Duck">Dagobert Duck</option>
+</select>