search the menu using input box (#1317)

* working version

* change onchange to oninput with minimum of three chars

* working version with delay and fix for category click

src/main/resources/i18n/messages.properties

@@ -54,6 +54,7 @@ sign.in=Sign in
 register.new=or register yourself as a new user
 sign.up=Sign up
 register.title=Register 
+searchmenu=Search lesson
 
 
 not.empty=This field is required.

src/main/resources/webgoat/static/js/search.js

@@ -0,0 +1,45 @@
+let input = document.getElementById('search');
+let timeout = null;
+
+input.addEventListener('keyup', function (e) {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+        //console.log('Value:', input.value);
+        search(input.value);
+    }, 1000);
+});
+
+function search(arg) {
+      var elementId = null;
+      lessons = document.querySelectorAll('[class="lesson"]');
+      lessons.forEach(function(lesson) {
+        lessonLowerCase = lesson.textContent.toLowerCase();
+        if (arg.length>2 && lessonLowerCase.includes(arg.toLowerCase())) {
+            if (arg.length<7 && arg.toLowerCase().includes('sql')) {
+                elementId = 'A3Injection-SQLInjectionintro';
+                document.getElementById('search').value='sql injection';
+            } else if (arg.length<9 && arg.toLowerCase().includes('pass')) {
+                elementId = 'A7IdentityAuthFailure-Passwordreset';
+                document.getElementById('search').value='password';
+            } else {
+                elementId = lesson.childNodes[0].id;
+                document.getElementById('search').value=lessonLowerCase;
+            }
+        } else {
+            return;
+        }
+      });
+
+      if (elementId != null) {
+        document.getElementById(elementId).click();
+        categoryId = elementId.substring(0,elementId.indexOf("-"));
+        //extra click to make sure menu does not disappear on same category search
+        if (categoryId == 'Challenges') {
+            document.querySelectorAll('[category="Introduction"]')[0].click();
+        } else {
+            document.querySelectorAll('[category="Challenges"]')[0].click();
+        }
+        document.querySelectorAll('[category="'+categoryId+'"]')[0].click();
+      }
+
+};

src/main/resources/webgoat/templates/main_new.html

@@ -151,6 +151,8 @@
                 </button>
             </a>
 
+            <input class="form-control" type="text" id="search" name="search" th:placeholder="#{searchmenu}"  style="width:60%" />
+            <script src="js/search.js" ></script>
 
         </div>
     </header>