Added typeahead through materialize

client/ListItems/listItemsForm.html

@@ -35,14 +35,9 @@
   </div>
   {{else}}
   <div class="row">
-    <div class="col s9 m10 l10">
-      <input list="listItemsData" name="listItems" id="listItems">
-      
-      <datalist id="listItemsData">
-        {{#each itemProdName}}
-        <option value="{{prodName}}">{{prodName}}</option>
-        {{/each}}
-      </datalist>
+    <div class="col s9 m10 l10 input-field">
+      <input type="text" class="autocomplete" id="findListItems" />
+      <label for="findListItems">Item...</label>
     </div>
     <div class="col s3 m2 l2">
       <a class="waves-effect waves-light btn saveListItem green right">Add</a>

client/ListItems/listItemsForm.js

@@ -1,10 +1,12 @@
 import { ListItems } from '../../imports/api/listItems.js'
 import { Lists } from '../../imports/api/lists.js';
 import { Products } from '../../imports/api/products.js';
+import { typeahead } from 'typeahead-standalone';
 
 Template.listItemsForm.onCreated(function() {
     this.subscribe("myListItems", Session.get("listId"));
     this.subscribe("myLists");
+    // this.subscribe("listProducts", Session.get("listItemVal"));
     this.subscribe("myProducts");
 });
 
@@ -17,12 +19,16 @@ Template.listItemsForm.onRendered(function() {
     Session.set("itemReqErr", false);
     Session.set("showReceivedItems", false);
     Session.set("filtering", false);
+    this.autorun(() => {
+        $('input.autocomplete').autocomplete({
+            data: Session.get("findListItems"),
+        });
+    });
 });
 
 Template.listItemsForm.helpers({
     selListName: function() {
         let selListId = Session.get("listId");
-        console.log("List ID in Helper is: " + selListId);
         let listInfo = Lists.findOne({ _id: selListId });
         return listInfo.listName;
     },
@@ -40,7 +46,7 @@ Template.listItemsForm.helpers({
 Template.listItemsForm.events({
     'click .saveListItem' (event) {
         event.preventDefault();
-        let item = $("#listItems").val();
+        let item = $("#findListItems").val();
         let listId = Session.get("listId");
         if (item == null || item == "") {
             Session.set("itemReqErr", true);
@@ -50,14 +56,14 @@ Template.listItemsForm.events({
                     console.log("    ERROR adding item to list: " + err);
                 } else {
                     console.log("    SUCCESS adding item to list.");
-                    $("#listItems").val("");
+                    $("#findListItems").val("");
                 }
             });
         }
     },
-    'keydown #listItems' (event) {
+    'keydown #findListItems' (event) {
         if (event.which === 13) {
-            let item = $("#listItems").val();
+            let item = $("#findListItems").val();
             let listId = Session.get("listId");
             if (item == null || item == "") {
                 Session.set("itemReqErr", true);
@@ -67,7 +73,7 @@ Template.listItemsForm.events({
                         console.log("    ERROR adding item to list: " + err);
                     } else {
                         console.log("    SUCCESS adding item to list.");
-                        $("#listItems").val("");
+                        $("#findListItems").val("");
                     }
                 });
             }
@@ -86,6 +92,22 @@ Template.listItemsForm.events({
             Session.set("searchVal", searchVal);
         }
     },
+    'keyup #findListItems' (event) {
+        if (event.which !== 13) {
+            let listItemObj = {};
+            let findItemVal = $("#findListItems").val();
+            Session.set("listItemVal", findItemVal);
+            let listItemInfo = Products.find({ prodName: {$regex: findItemVal + '.*', $options: 'i'}}, { limit: 5 }).fetch();
+            if (typeof listItemInfo != 'undefined' && listItemInfo != "" && listItemInfo != null) {
+                for (i=0; i < listItemInfo.length; i++) {
+                    let item = listItemInfo[i].prodName;
+                    let store = listItemInfo[i].prodStore;
+                    listItemObj[item] = store;
+                }
+            }
+            Session.set("findListItems", listItemObj);
+        }
+    },
     'click #filterOn' (event) {
         event.preventDefault();
         Session.set("filtering", true);

server/publish.js

@@ -37,6 +37,14 @@ Meteor.publish("myProducts", function() {
     }
 });
 
+Meteor.publish("listProducts", function(itemNameListing) {
+    try {
+        return Products.find({ itemName: {$regex: itemNameListing + '.*', $options: 'i'}}, { limit: 5 });
+    } catch (error) {
+        console.log("    ERROR pulling items by filtered item name: " + error);
+    }
+});
+
 Meteor.publish("myLists", function() {
     try {
         return Lists.find( { $or: [ { listOwner: this.userId, listComplete: false }, { listShared: true, listComplete: false } ] } );