Select2 search enhancement (#1276)

assets/js/plugins/KimaiFormSelect.js

@@ -31,9 +31,83 @@ export default class KimaiFormSelect extends KimaiPlugin {
                 dropdownParent: $(container),
             };
         }
+
+        // Function to match the name of the parent and not only the names of the children
+        // Based on the original matcher function of Select2: https://github.com/select2/select2/blob/5765090318c4d382ae56463cfa25ba8ca7bdd495/src/js/select2/defaults.js#L272
+        // More information: https://select2.org/searching | https://github.com/select2/docs/blob/develop/pages/11.searching/docs.md
+        function matcher(params, data) {
+            // Always return the object if there is nothing to compare
+            if (jQuery.trim(params.term) === '') {
+                return data;
+            }
+
+            // Check whether options has children
+            let hasChildren = data.children && data.children.length > 0;
+
+            // Split search param by space to search for all terms and convert all to uppercase
+            let terms = params.term.toUpperCase().split(' ');
+            let original = data.text.toUpperCase();
+
+            // Always return the parent option including its children, when the name matches one of the params
+            // Check if the text contains all or at least one of the terms
+            let foundAll = true;
+            let foundOne = false;
+            let missingTerms = [];
+            terms.forEach(function(item, index) {
+                if (original.indexOf(item) > -1) {
+                    foundOne = true;
+                } else {
+                    foundAll = false;
+                    missingTerms.push(item);
+                }
+            });
+
+            // If the option element contains all terms, return it
+            if(foundAll) {
+                return data;
+            }
+
+            // Do a recursive check for options with children
+            if (hasChildren) {
+                // If the parent already contains one or more search terms, proceed only with the missing ones
+                // First: Clone the original params object...
+                let newParams = jQuery.extend(true, {}, params);
+                if (foundOne) {
+                    newParams.term = missingTerms.join(' ');
+                } else {
+                    newParams.term = params.term;
+                }
+
+                // Clone the data object if there are children
+                // This is required as we modify the object to remove any non-matches
+                let match = jQuery.extend(true, {}, data);
+
+                // Check each child of the option
+                for (let c = data.children.length - 1; c >= 0; c--) {
+                    let child = data.children[c];
+
+                    let matches = matcher(newParams, child);
+
+                    // If there wasn't a match, remove the object in the array
+                    if (matches === null) {
+                        match.children.splice(c, 1);
+                    }
+                }
+
+                // If any children matched, return the new object
+                if (match.children.length > 0) {
+                    return match;
+                }
+            }
+
+            // If the option or its children do not contain the term, don't return anything
+            return null;
+        }
+
         options = {...options, ...{
             language: this.getContainer().getConfiguration().get('locale'),
-            theme: "bootstrap"
+            theme: "bootstrap",
+            matcher: matcher
         }};
         jQuery(selector + ' ' + elementSelector).select2(options);
 
@@ -43,11 +117,11 @@ export default class KimaiFormSelect extends KimaiPlugin {
             }, 10);
         });
     }
-    
+
     destroySelectPicker(selector) {
         jQuery(selector + ' ' + this.selector).select2('destroy');
     }
-    
+
     updateOptions(selectIdentifier, data) {
         let select = jQuery(selectIdentifier);
         let emptyOption = jQuery(selectIdentifier + ' option[value=""]');

public/build/entrypoints.json

@@ -5,7 +5,7 @@
         "build/runtime.4ee6be68.js",
         "build/0.a87622f3.js",
         "build/1.c1bee41f.js",
-        "build/app.b6f66654.js"
+        "build/app.654b112a.js"
       ],
       "css": [
         "build/app.e5eb271e.css"
@@ -35,7 +35,7 @@
     "build/runtime.4ee6be68.js": "sha384-xNNrNinl64G3nCUrIskgSjU0mUXXCB9lj6XCSInBTwxSKXk8uTMafnLHtdWdIGtd",
     "build/0.a87622f3.js": "sha384-ncT/BKhCsqH6jhxwdsSG95m1ei7ZZjeZtzH1262h+OPUU80TSFFE3dt+abcHHMok",
     "build/1.c1bee41f.js": "sha384-7UVWcP6Hefp2k/CrtGSITKXx4dSZqtvpAiU8WX7dClETkzMewrUjoCRtVXQ5j3KI",
-    "build/app.b6f66654.js": "sha384-GBDeHPpifXZABx0HlCJmKaK2T7B3fhfRSnF2dr6qfXlLKQZ1YxFjprXTzspwBfic",
+    "build/app.654b112a.js": "sha384-N3FPEZ2My08r2UzBARsUYukgMM5L+vGKHHDiUG5XPwTmiKFZh7PE+ldwk3C4g7Zn",
     "build/app.e5eb271e.css": "sha384-BNUNuu56X2x+Xmn1JrQe6d3mt6R+QZu7OgR/4OXkBDueSE6vu0UqmRaDPkyiRzMw",
     "build/2.7be60d8d.js": "sha384-txR0QG+838LKYtPQ99Gx4OU7WmgN9J3joZEyGwIskSz74EN1T4/IBVnmNaKiFN1q",
     "build/chart.0af3f813.js": "sha384-I57c9DtU3AOG2kzKqIZkIu0hi1aGYHRZ5QG4LKC9+9slzJnAMttPGXoL2cQG3m6y",

public/build/manifest.json

@@ -3,7 +3,7 @@
   "build/1.c1bee41f.js": "build/1.c1bee41f.js",
   "build/2.7be60d8d.js": "build/2.7be60d8d.js",
   "build/app.css": "build/app.e5eb271e.css",
-  "build/app.js": "build/app.b6f66654.js",
+  "build/app.js": "build/app.654b112a.js",
   "build/calendar.css": "build/calendar.36ef2a02.css",
   "build/calendar.js": "build/calendar.082ddfbb.js",
   "build/chart.js": "build/chart.0af3f813.js",