konova/templates/konova/widgets/checkbox-tree-select.html

@@ -1,3 +1,9 @@
+{% load i18n %}
+
+<div class="ml-4 mb-4">
+    <input id="tree-search-input" class="form-control" type="text" placeholder="{% trans 'Search' %}"/>
+</div>
+
 <div id="tree-root">
     {% include 'konova/widgets/checkbox-tree-select-content.html' %}
 </div>
@@ -31,6 +37,22 @@
         toggleSelectedCssClass(this);
     }
 
+    function searchInputHandler(event){
+        var elem = $(this);
+        var val = elem.val()
+        var allTreeElements = $(".tree-element")
+        var allTreeElementsContain = $(".tree-element:contains(" + val + ")")
+        if(val.length > 0){
+            allTreeElements.hide()
+            allTreeElementsContain.show()
+        }else{
+            allTreeElements.show()
+        }
+    }
+
+    // Add event listener on search input
+    $("#tree-search-input").keyup(searchInputHandler)
+
     // Add event listener on changed checkboxes
     $(".tree-input").change(changeHandler);