added levenshtein distance to search input

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -12,6 +12,14 @@ const statsOf = ref("");
 const statsBy = ref("");
 let chart;
 
+const articleList = [
+    "First Article",
+    "The composition of the light",
+    "The composition of the sand",
+    "Fluctuation in universe beavers",
+    "The Potato War"
+]
+
 const jsonMockViewsByYears= [
   {label: "2004", y:4},
   {label: "2005", y:99},
@@ -20,26 +28,39 @@ const jsonMockViewsByYears= [
   {label: "2011", y:1666},
 ]
 
-function inputKeyUp() {
+function searchInList(list, searchInput){
-  let filter, ul, li, a, txtValue;
+  if (searchInput === "")
-  filter = input.value.toUpperCase();
+    return list
-  if (document.getElementById("myUL") != null) {
+  let retList =[]
-    ul = document.getElementById("myUL");
+  for (let i = 0; i < list.length; i++) {
-    li = ul.getElementsByTagName("li");
+    console.log(list[i] + " et " + searchInput + " vaut " + lDistance(list[i], searchInput) )
-
+    if (lDistance(list[i], searchInput) < 6){
-    // Loop through all list items, and hide those who don't match the search query
+      retList.push(list[i])
-    for (let 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";
-      }
     }
   }
+  return retList
 }
 
+function lDistance(s,t){
+  if (!s.length) return t.length;
+  if (!t.length) return s.length;
+  const arr = [];
+  for (let i = 0; i <= t.length; i++) {
+    arr[i] = [i];
+    for (let j = 1; j <= s.length; j++) {
+      arr[i][j] =
+          i === 0
+              ? j
+              : Math.min(
+                  arr[i - 1][j] + 1,
+                  arr[i][j - 1] + 1,
+                  arr[i - 1][j - 1] + (s[j - 1] === t[i - 1] ? 0 : 1)
+              );
+    }
+  }
+  return arr[t.length][s.length];
+};
+
 const options = reactive({
     backgroundColor:null,
     theme: "light2",
@@ -113,23 +134,9 @@ function update(){
       </div>
     </div>
     <div id="articles">
-      <input
+      <input type="text" id="search-input" placeholder="search articles" v-model="input"/>
-        type="text"
+      <ul id="articlesUL">
-        id="search-input"
+        <li v-for="n in searchInList(articleList,input)">{{n}}</li>
-        @keyup="inputKeyUp()"
-        placeholder="search articles"
-        v-model="input"
-      />
-      <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>
@@ -189,7 +196,6 @@ function update(){
 }
 
 #articles {
-  background-color: orange;
 }
 
 #search-input {
@@ -200,8 +206,9 @@ function update(){
   margin-bottom: 12px;
 }
 
-#myUL {
+#articlesUL {
   list-style-type: none;
+  color: white;
   padding: 0;
   margin: 0;
 }