Option list - support for [multi], [sticky] & [multi-col]

config/app.php

@@ -65,7 +65,7 @@ return [
 
     'hrm2_url' => env('HRM2_URL'),
 
-    'asset_version' => 81,
+    'asset_version' => 82,
 
     'temp_dir' => env('TEMP_DIR'),
 

js-dev/option-list.js

@@ -3,13 +3,17 @@
         let ol = $(_input).next('.data-option-list');
         if(ol.length && !ol.is(':visible')) {
             ol.show();
+            return true;
         }
+        return false;
     }
     function hideOptionsList(_input) {
         let ol = $(_input).next('.data-option-list');
         if(ol.length && ol.is(':visible')) {
             ol.hide();
+            return true;
         }
+        return false;
     }
     function init() {
         $(document)
@@ -18,9 +22,21 @@
                 _e.stopPropagation();
                 _e.preventDefault();
                 markEventAsConsumed(_e);
-                $(this).parent().prev('input[data-option-list]').val('').focus();
-                document.execCommand('insertText', false, $(this).text());
-                $(this).closest('.data-option-list').hide();
+                let elem = $(this).parent().prev('input[data-option-list]'),
+                    text = $(this).text();
+                if(!elem.is('[multi-option-list]')) {
+                    elem.val('');
+                }
+                else {
+                    elem.val($.trim(elem.val()));
+                    elem[0].selectionStart = elem[0].selectionEnd = elem.val().length;
+                    if(elem.val() !== '') text = ', ' + text;
+                }
+                elem.focus();
+                document.execCommand('insertText', false, text);
+                if(!elem.is('[sticky-option-list]')) {
+                    $(this).closest('.data-option-list').hide();
+                }
                 return false;
             });
         $(document)
@@ -35,7 +51,16 @@
             .off('blur.trigger-option-list', 'input[data-option-list]')
             .on('blur.trigger-option-list', 'input[data-option-list]', function() {
                 hideOptionsList(this);
-            });
+            })
+            .off('keydown.discard-option-list', 'input[data-option-list]')
+            .on('keydown.discard-option-list', 'input[data-option-list]', function(_e) {
+                if(_e.which === 27) {
+                    if(hideOptionsList(this)) {
+                        markEventAsConsumed(_e);
+                        return false;
+                    }
+                }
+            })
     }
     addMCInitializer('option-list', init);
 })();

public/css/style.css

@@ -1718,6 +1718,21 @@ table.table-edit-sheet .ql-editor[contenteditable] {
 .data-option-list>div:hover {
     background: aliceblue;
 }
+input[multi-col-option-list]+.data-option-list {
+    max-width: unset;
+    width: 500px !important;
+}
+input[multi-col-option-list]+.data-option-list>div {
+    display: inline-block;
+    width: calc(50% - 10px);
+    border: 0 !important;
+}
+input[multi-col-option-list]+.data-option-list>div:before {
+    content: '+';
+    color: #777;
+    font-weight: bold;
+    margin-right: 4px;
+}
 .measurement-item:not(:last-child) {
     border-bottom: 1px solid #e7e7e7;
 }