Merge in changes from no-match-template into master. (#20)

README.md

@@ -106,6 +106,10 @@ Collection object shown with defaults:
     return item.string;
   },
 
+  // template for when no match is found (optional),
+  // If not template provided, menu is hidden.
+  noMatchTemplate: null,
+
   // specify an alternative parent container for the menu
   menuContainer: document.body,
 
@@ -142,6 +146,16 @@ document.getElementById('myElement').addEventListener('tribute-replaced', functi
 });
 ```
 
+### No Match Event
+You can bind to the `tribute-no-match` event to know when no match is found in your collection.
+
+If your element has an ID of `myElement`:
+```js
+document.getElementById('myElement').addEventListener('tribute-no-match', function (e) {
+  console.log('No match found!');
+});
+```
+
 ## Tips
 Some useful approaches to common roadblocks when implementing @mentions.
 

example/index.html

@@ -84,6 +84,9 @@ <h5>Tribute on traditional form elements!</h5>
           }
 
           return '@' + item.original.value;
+        },
+        noMatchTemplate: function (tribute) {
+          return '<li>No match!</li>';
         }
       });
 
@@ -138,6 +141,11 @@ <h5>Tribute on traditional form elements!</h5>
       document.getElementById('test').addEventListener('tribute-replaced', function (e) {
         console.log('Text replaced by Tribute!');
       });
+
+      document.getElementById('test').addEventListener('tribute-no-match', function (e) {
+        var values = [{key: 'Cheese Tacos', value: 'Cheese Tacos', email: '[email protected]'}];
+        tribute.appendCurrent(values);
+      });
     </script>
   </body>
 </html>

src/Tribute.js

@@ -15,7 +15,8 @@ class Tribute {
         lookup = 'key',
         fillAttr = 'value',
         collection = null,
-        menuContainer = null
+        menuContainer = null,
+        noMatchTemplate = null
     }) {
 
         this.menuSelected = 0
@@ -36,8 +37,18 @@ class Tribute {
                 // function called on select that retuns the content to insert
                 selectTemplate: (selectTemplate || Tribute.defaultSelectTemplate).bind(this),
 
+                // function called that returns content for an item
                 menuItemTemplate: (menuItemTemplate || Tribute.defaultMenuItemTemplate).bind(this),
 
+                // function called when menu is empty, disables hiding of menu.
+                noMatchTemplate: ((t) => {
+                    if (typeof t === 'function') {
+                        return t.bind(this)
+                    }
+
+                    return null
+                })(noMatchTemplate),
+
                 // column to search against in the object
                 lookup: lookup,
 
@@ -56,6 +67,14 @@ class Tribute {
                     selectClass: item.selectClass || selectClass,
                     selectTemplate: (item.selectTemplate || Tribute.defaultSelectTemplate).bind(this),
                     menuItemTemplate: (item.menuItemTemplate || Tribute.defaultMenuItemTemplate).bind(this),
+                    // function called when menu is empty, disables hiding of menu.
+                    noMatchTemplate: ((t) => {
+                        if (typeof t === 'function') {
+                            return t.bind(this)
+                        }
+
+                        return null
+                    })(noMatchTemplate),
                     lookup: item.lookup || lookup,
                     fillAttr: item.fillAttr || fillAttr,
                     values: item.values
@@ -172,13 +191,20 @@ class Tribute {
 
         this.current.filteredItems = items
 
+        let ul = this.menu.querySelector('ul')
+
         if (!items.length) {
-            this.hideMenu()
+            let noMatchEvent = new CustomEvent('tribute-no-match', { detail: this.menu })
+            this.current.element.dispatchEvent(noMatchEvent)
+            if (!this.current.collection.noMatchTemplate) {
+                this.hideMenu()
+            } else {
+                ul.innerHTML = this.current.collection.noMatchTemplate()
+            }
+
             return
         }
 
-        let ul = this.menu.querySelector('ul')
-
         ul.innerHTML = ''
 
         items.forEach((item, index) => {
@@ -205,6 +231,8 @@ class Tribute {
     }
 
     selectItemAtIndex(index) {
+        index = parseInt(index)
+        if (typeof index !== 'number') return
         let item = this.current.filteredItems[index]
         let content = this.current.collection.selectTemplate(item)
         this.replaceText(content)
@@ -213,6 +241,29 @@ class Tribute {
     replaceText(content) {
         this.range.replaceTriggerText(content, true, true)
     }
+
+    _append(collection, element, newValues, replace) {
+        if (this.isActive) {
+            if (!replace) {
+                collection.values = collection.values.concat(newValues)
+            } else {
+                collection.values = newValues
+            }
+        }
+    }
+
+    append(collectionIndex, newValues, replace) {
+        let index = parseInt(collectionIndex)
+        if (typeof index !== 'number') throw new Error('please provide an index for the collection to update.')
+
+        let collection = this.collection[index]
+
+        this._append(this.current.collection, this.current.element, newValues, replace)
+    }
+
+    appendCurrent(newValues, replace) {
+        this._append(this.current.collection, this.current.element, newValues, replace)
+    }
 }
 
-global.Tribute = Tribute;
+global.Tribute = Tribute;

src/TributeEvents.js

@@ -97,7 +97,8 @@ class TributeEvents {
             }
         }
 
-        if (instance.tribute.current.trigger && instance.commandEvent === false) {
+        if (instance.tribute.current.trigger && instance.commandEvent === false
+            || instance.tribute.isActive && event.keyCode === 8) {
             instance.tribute.showMenuFor(this, true)
         }
     }
@@ -204,6 +205,8 @@ class TributeEvents {
             delete: (e, el) => {
                 if (this.tribute.isActive && this.tribute.current.mentionText.length < 1) {
                     this.tribute.hideMenu();
+                } else if (this.tribute.isActive) {
+                    tribute.showMenuFor(el)
                 }
             }
         }
@@ -227,4 +230,4 @@ class TributeEvents {
 }
 
 
-export default TributeEvents;
+export default TributeEvents;