Update templates/wordSearch.html

templates/wordSearch.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="static/wordSearchCss.css">
     <link rel="stylesheet" href="static/popups.css">
     <link rel="stylesheet" href="static/IMG-Larger.css">
+    <link rel="stylesheet" href="static/searchButton.css">
     <meta charset="utf-8">
     <title>ADR Console</title>
     <link rel = "icon"  type = "image/png"  sizes = "180x154" href = "static/images/TSAlogoCropped180x154.png">
@@ -96,14 +97,19 @@
       </div>
 
       <div id ="tomeasurediv" hidden="until-found">
-          <label id="measureLabel">Documents To Search in</label> <br>
+          <label id="measureLabel">Documents To Search in</label> 
+          <!-- <input type="search" onkeyup=filterFunction(this.id) id="tomeasureSearchInput"> -->
+          <br>
             <div id="measureCheckbox">
               <select style="margin-left: -1%;" hidden id="measureselectid"  multiple size="5" required>   </select>
             </div>
       </div>
       
       <div id ="relvDocdiv" hidden="until-found">
-          <label id="relvDocLabel">Other Relevant Documents</label> <br>
+
+          <label id="relvDocLabel">Other Relevant Documents</label> 
+          <input type="search" onkeyup=filterFunction(this.id) id="relevantSearchInput">
+          <br>
             <div id ="relvdiv">
               <select style="margin-left: -1%;" hidden name="relvselectname"  id="relvselectid"  multiple size="5">   </select>
             </div>
@@ -1017,5 +1023,24 @@ function ShowPopUp(){
         mpopup.style.display = "none";
     }
 };
+
+function filterFunction(id) {
+  var input, filter, ul, li, a, i;
+  input = document.getElementById(id);
+  filter = input.value.toUpperCase();
+  if (id.toString().startsWith('tomeasure'))
+    a = document.getElementById("measureselectid").children;
+  else
+    a = document.getElementById("relvselectid").children;
+  // a = div.getElementsByTagName("option");
+  for (i = 0; i < a.length; i++) {
+    txtValue = a[i].textContent || a[i].innerText;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      a[i].style.display = "";
+    } else {
+      a[i].style.display = "none";
+    }
+  }
+}
 </script>