From eb22dcf9b426dc785342836d6e7072180355f9ba Mon Sep 17 00:00:00 2001
From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de>
Date: Tue, 15 Feb 2022 14:35:49 +0100
Subject: [PATCH] # 112 Search input for TreeWidget

* adds search input field for js-filtering by input
---
 .../konova/widgets/checkbox-tree-select.html  | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/konova/templates/konova/widgets/checkbox-tree-select.html b/konova/templates/konova/widgets/checkbox-tree-select.html
index ddcc60c0..3129be8a 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select.html
+++ b/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);