Fix bug with filtering ingredients

views/dashboardPage/addIngredient.js

@@ -8,14 +8,12 @@ window.addIngredientObj = {
         document.querySelector("#addIngredientAction").style.display = "flex";
 
         if(!this.isPopulated){
-            this.filter();
+            this.populate();
             this.isPopulated = true;
         }
     },
 
-    filter: function(){
-        this.rows = [];
-        
+    populate: function(){        
         axios.get("/ingredients")
             .then((response)=>{
                 if(typeof(response.data) === "string"){
@@ -67,7 +65,7 @@ window.addIngredientObj = {
                         }
                     }
 
-                    this.displayIngredients();
+                    this.filterAndDisplay();
                 }
             })
             .catch((err)=>{
@@ -76,7 +74,8 @@ window.addIngredientObj = {
             });
     },
 
-    displayIngredients: function(){
+    filterAndDisplay: function(){
+        let queryStr = document.querySelector("#addFilter").value;
         let tbody = document.querySelector("#addIngredientAction tbody");
 
         while(tbody.children.length > 0){
@@ -84,7 +83,9 @@ window.addIngredientObj = {
         }
 
         for(let row of this.rows){
-            tbody.appendChild(row);
+            if(row.children[1].innerText.includes(queryStr)){
+                tbody.appendChild(row);
+            }
         }
     },
 
@@ -97,7 +98,7 @@ window.addIngredientObj = {
             this.currentSort = child;
         }
 
-        this.displayIngredients();
+        this.filterAndDisplay();
     },
 
     submitAdd: function(){

views/dashboardPage/dashboard.ejs

@@ -130,7 +130,7 @@
                 <div>
                     <h2>Choose Ingredients</h2>
 
-                    <input id="addFilter" type="text" placeholder="FILTER INGREDIENTS" onkeyup="window.addIngredientObj.filter()">
+                    <input id="addFilter" type="text" placeholder="FILTER INGREDIENTS" onkeyup="window.addIngredientObj.filterAndDisplay()">
 
                     <table>
                         <thead>