Added autocomplete to Menu Item entryies

client/MenuItems/menuItemsForm.js

@@ -5,7 +5,7 @@ import { M } from '../lib/assets/materialize.js';
 
 Template.menuItemsForm.onCreated(function() {
     this.subscribe("myMenus");
-    this.subscribe("myMenuItems", Session.get("menuId"));
+    this.subscribe("allMenuItems", Session.get("menuId"));
 });
 
 Template.menuItemsForm.onRendered(function() {
@@ -13,6 +13,15 @@ Template.menuItemsForm.onRendered(function() {
     var instances = M.Datepicker.init(elems, {});
 
     Session.set("menuItemErr", false);
+    Session.set("menuListItems", {});
+
+    this.autorun(() => {
+        var elema = document.querySelectorAll('.autocomplete');
+        var instancea = M.Autocomplete.init(elema, {
+            minlength: 0,
+            data: Session.get("menuListItems"),
+        });
+    });
 });
 
 Template.menuItemsForm.helpers({
@@ -65,5 +74,20 @@ Template.menuItemsForm.events({
                 }
             });
         }
-    }
+    },
+    'keyup #menuItemInp' (event) {
+        if (event.which != 13) {
+            let findMenuItem = $("#menuItemInp").val();
+            let menuItemInfo = MenuItems.find({ itemName: {$regex: findMenuItem + '.*', $options: 'i' }}).fetch();
+            if (typeof menuItemInfo != 'undefined' && menuItemInfo != '' && menuItemInfo != null) {
+                getMenuItemList(menuItemInfo);
+            }
+        }
+    },
 });
+
+getMenuItemList = function(menuItemInfo) {
+    let menuItemObjArray = [];
+    menuItemObjArray = menuItemInfo.map(info => ({ id: info._id, text: info.itemName }));
+    Session.set("menuListItems", menuItemObjArray);
+}

client/MenuItems/menuItemsTbl.js

@@ -22,7 +22,7 @@ Template.menuItemsTbl.onRendered(function() {
 
 Template.menuItemsTbl.helpers({
     thisMenuItems: function() {
-        return MenuItems.find({}, { sort: { serveDateActual: 1 }});
+        return MenuItems.find({ menuId: Session.get("menuId") }, { sort: { serveDateActual: 1 }});
     }
 });
 

client/MenuItems/menuitemsForm.html

@@ -2,8 +2,11 @@
     <h5>{{menuName}}</h5>
     <form class="menuItemFrm row" style="gap: 1em;" id="menuItemFrm">
         <div class="col s12 m6 l9 input-field outlined">
-            <input type="text" class="menuItemInp" style="{{#if $eq menuItemErr true}}border: 2px solid red{{/if}}" id="menuItemInp" />
+            <input type="text" class="autocomplete" id="menuItemInp" autocomplete="off" />
-            <label for="menuItemInp">Add Menu Item</label>
+            <label for="menuItemInp">Item</label>
+
+            <!-- <input type="text" class="menuItemInp" style="{{#if $eq menuItemErr true}}border: 2px solid red{{/if}}" id="menuItemInp" />
+            <label for="menuItemInp">Add Menu Item</label> -->
         </div>
         <div class="col s12 m6 l3 input-field outlined">
             <input type="text" class="datepicker" id="dateServed" />

server/publish.js

@@ -83,10 +83,18 @@ Meteor.publish("myMenuItems", function(menuId) {
     try {
         return MenuItems.find({ menuId: menuId });
     } catch (error) {
-        console.log("    ERROR pulling list items for this list: " + error);
+        console.log("    ERROR pulling menu items for this list: " + error);
     }
 });
 
+Meteor.publish("allMenuItems", function() {
+    try {
+        return MenuItems.find({});
+    } catch (error) {
+        console.log("    ERROR pulling all menu items from collection: " + error);
+    }
+})
+
 Meteor.publish("todayMenuItems", function() {
     try {
         let todayDate = new Date();