search bar not working (to be shared with william)

frontend/src/Apps/ResearcherProfile.vue

@@ -1,7 +1,26 @@
 <script setup>
-  import CanvasJSChart from "@canvasjs/vue-charts";
+ function inputKeyUp() {
+    let input, filter, ul, li, a, i, txtValue;
+    input = document.getElementById('search-input');
+    filter = input.value.toUpperCase();
+    ul = document.getElementById("myUL");
+    li = ul.getElementsByTagName('li');
 
-  const chartData ={
+    // Loop through all list items, and hide those who don't match the search query
+    for (i = 0; i < li.length; i++) {
+      a = li[i].getElementsByTagName("a")[0];
+      txtValue = a.textContent || a.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        li[i].style.display = "";
+      } else {
+        li[i].style.display = "none";
+      }
+    }
+  }
+
+  const mydata = {
+    data() {
+        return {
           options: {
           theme: "light2",
           animationEnabled: true,
@@ -28,7 +47,8 @@
           height: "360px"
         }
       }
-
+    }
+  }
 
 </script>
 
@@ -82,14 +102,24 @@
     </select>
     </div>
     <div id="statsPie">
-      <CanvasJSChart :data="chartData"/>
+			  <!--  <CanvasJSChart :options="mydata" @chart-ref="chartRef"/> !-->
-
 
 
     </div>
-
   </div>
   <div id="articles">
+    <input type="text" id="search-input" @onkeyup="inputKeyUp" placeholder="search articles">
+    <ul id="myUL">
+      <li><a href="#">Adele</a></li>
+      <li><a href="#">Agnes</a></li>
+
+      <li><a href="#">Billy</a></li>
+      <li><a href="#">Bob</a></li>
+
+      <li><a href="#">Calvin</a></li>
+      <li><a href="#">Christina</a></li>
+      <li><a href="#">Cindy</a></li>
+    </ul>
 
   </div>
 </div>
@@ -152,5 +182,31 @@
 #articles {
   background-color: orange;
 }
+#search-input{
+  width: 60%;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  border: 1px solid #ddd;
+  margin-bottom: 12px;
+}
+#myUL{
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+#myUL li a {
+  border: 1px solid #ddd; /* Add a border to all links */
+  margin-top: -1px; /* Prevent double borders */
+  background-color: #f6f6f6; /* Grey background color */
+  padding: 12px; /* Add some padding */
+  text-decoration: none; /* Remove default text underline */
+  font-size: 18px; /* Increase the font-size */
+  color: black; /* Add a black text color */
+  display: block; /* Make it into a block element to fill the whole list */
+}
+#myUL li a:hover:not(.header) {
+  background-color: #eee;
+}
 
 </style>