Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="static/LegendPageStyle.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">
@@ -98,7 +99,9 @@
 
   
       <div id ="tomeasurediv">
-        <label id="measureLabel">Document To Measure</label> <br>
+        <label id="measureLabel">Document To Measure</label>  
+        <input type="search" onkeyup=filterFunction(this.id) id="tomeasureSearchInput">
+        <br>
         <div id="measureCheckbox">
           <select style="margin-left: -1%;" hidden name="measureselectname"  id="measureselectid"  multiple size="5" required>   </select>
           <select id='selectunitA' hidden>
@@ -113,7 +116,9 @@
       </div>
   
       <div id ="relvDocdiv">
-        <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>
@@ -2428,5 +2433,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>