Support noMatchTemplate configuration; fixes #25

History.md

@@ -1,6 +1,7 @@
 ## vNEXT
 
 * Simulate pre-Blaze rendering behavior to properly deal with changing data contexts, until an updated Blaze Component API is released.
+* Support a custom specified template when no match is found. (#25)
 
 ## v0.4.3
 

README.md

@@ -3,19 +3,19 @@ meteor-autocomplete [![Build Status](https://travis-ci.org/mizzao/meteor-autocom
 
 Client/server autocompletion designed for Meteor's collections and reactivity.
 
-Check out a demo app at http://autocomplete.meteor.com or the [source](https://github.com/mizzao/meteor-autocomplete/tree/master/examples/pubsublocal).
+Check out a demo app at http://autocomplete.meteor.com or the [source](examples/pubsublocal).
 
 Help keep your favorite Meteor packages alive! If you depend on this package in your app and find it useful, consider a donation at [Gittip](https://www.gittip.com/mizzao/) for me (or other Meteor package maintainers).
 
 ## What's this do?
 
 Auto-completes typing in text `input`s or `textarea`s from different local or remote Meteor collections when triggered by certain symbols. You've probably seen this when referring to users or issues in a GitHub conversation. For example, you may want to ping a user:
 
-![Autocompleting a user](https://raw.github.com/mizzao/meteor-autocomplete/master/docs/mention1.png)
+![Autocompleting a user](docs/mention1.png)
 
 ...and ask them to look at a certain item:
 
-![Autocompleting something else](https://raw.github.com/mizzao/meteor-autocomplete/master/docs/mention2.png)
+![Autocompleting something else](docs/mention2.png)
 
 Features:
  - Multiple collection matching with different trigger tokens and fields
@@ -93,6 +93,7 @@ Template.foo.settings = function() {
 - `subscription`: A custom subscription for server-side search; see below.
 - `template`: The template that should be used to render each list item.
 - `filter`: (optional) An object that will be merged with the autocomplete selector to limit the results to more specific documents in the collection.
+- `noMatchTemplate`: (optional) A template to display when nothing matches. This template can use the [reactive functions on the AutoComplete object](autocomplete-client.coffee) to display a specific message, or be [assigned mouse/keyboard events](http://docs.meteor.com/#eventmaps) for user interaction.
 - `callback`: (optional) A function which is called when an item is selected with arguments `(doc, element)`, corresponding to the document of the selected item and the active input field.
 
 Default matcher arguments: the default behavior is to create a regex against the field to be matched, which will be constructed using the arguments below.
@@ -175,11 +176,6 @@ For example settings see one of the following:
 - The widget can keep track of a list of ordered document ids for matched items instead of just spitting out the fields (which currently should be unique)
 - Could potentially support rendering DOM elements instead of just text. However, this can currently be managed in post-processing code for chat/post functions (like how GitHub does it).
 
-### Known Issues
-
-- Regexp only matches from beginning to cursor position in word (done in jquery-sew, could use rewrite)
-- Enter key doesn't bubble if no match on a rule (possibly a feature)
-
 ### Credits/Notes
 
 - If you are not using Meteor, you may want to check out [jquery sew](https://github.com/tactivos/jquery-sew), from which this was heavily modified.

examples/pubsublocal/client/client.js

@@ -16,6 +16,7 @@ Template.pubsub.settings = {
       field: 'name',
       options: '', // Use case-sensitive match to take advantage of server index.
       template: Template.serverCollectionPill,
+      noMatchTemplate: Template.serverNoMatch,
       callback: function(doc) { console.log(doc); }
     },
     {

examples/pubsublocal/client/pubsublocal.html

@@ -53,3 +53,7 @@ <h2>Tests to try</h2>
 <template name="clientCollectionPill">
   {{type}} <small class="muted">({{_id}})</small>
 </template>
+
+<template name="serverNoMatch">
+    <span class="text-danger">Nothing found on the server for <b>{{getFilter}}</b>!</span>
+</template>

inputs.html

@@ -27,11 +27,15 @@
                 {{/each}}
             </ul>
             {{else}}
-            (<i>no matches</i>)
+                {{> noMatchTemplate }}
             {{/unless}}
         {{else}}
             <i>loading...</i>
         {{/if}}
     </div>
     {{/if}}
 </template>
+
+<template name="_noMatch">
+    (<i>no matches</i>)
+</template>

templates.coffee

@@ -48,3 +48,6 @@ Template._autocompleteContainer.events =
   "mouseenter .-autocomplete-item": (e, tmplInst) -> tmplInst.data.onItemHover(this, e)
 
 Template._autocompleteContainer.empty = -> @filteredList().count() is 0
+
+Template._autocompleteContainer.noMatchTemplate = ->
+  @matchedRule().noMatchTemplate || Template._noMatch