Add support for single empty message when working with multiple datasets...

doc/jquery_typeahead.md

@@ -255,6 +255,10 @@ When initializing a typeahead, there are a number of options you can configure.
 * `minLength` – The minimum character length needed before suggestions start 
   getting rendered. Defaults to `1`.
 
+* `sharedTemplates` – Shared templates for use with multiple datasets.
+  Currently only `sharedTemplates.empty` is supported. See [below](#single-empty-message-with-multiple=datasets) 
+  for more information. Defaults to `{}`.
+
 ### Datasets
 
 A typeahead is composed of one or more datasets. When an end-user modifies the
@@ -309,6 +313,20 @@ Datasets can be configured using the following options.
   context. Defaults to the value of `displayKey` wrapped in a `p` tag i.e. 
   `<p>{{value}}</p>`.
 
+#### Empty Message With Multiple Datasets
+
+When you are using multiple datasets, but only would like to display a single empty message 
+(instead of one per dataset), construct the typeahead like so:
+
+```javascript
+$('.typeahead').typeahead({
+  /* other options */
+  sharedTemplates: {
+    empty: '<p>Some informative empty message.</p>'
+  }
+});
+```
+
 ### Custom Events
 
 The typeahead component triggers the following custom events.

src/typeahead/dataset.js

@@ -36,6 +36,8 @@ var Dataset = (function() {
     this.templates = getTemplates(o.templates, this.displayFn);
 
     this.$el = $(html.dataset.replace('%CLASS%', this.name));
+
+    this.hasSuggestions = false;
   }
 
   // static methods
@@ -66,7 +68,7 @@ var Dataset = (function() {
       var that = this, hasSuggestions;
 
       this.$el.empty();
-      hasSuggestions = suggestions && suggestions.length;
+      this.hasSuggestions = hasSuggestions = suggestions && suggestions.length;
 
       if (!hasSuggestions && this.templates.empty) {
         this.$el

src/typeahead/dropdown.js

@@ -25,6 +25,8 @@ var Dropdown = (function() {
 
     this.datasets = _.map(o.datasets, initializeDataset);
 
+    this.templates = o.templates;
+
     // bound functions
     onSuggestionClick = _.bind(this._onSuggestionClick, this);
     onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
@@ -209,7 +211,38 @@ var Dropdown = (function() {
     update: function update(query) {
       _.each(this.datasets, updateDataset);
 
-      function updateDataset(dataset) { dataset.update(query); }
+      var noSuggestions = true;
+
+      function updateDataset(dataset) { 
+        dataset.update(query); 
+      }
+
+      _.each(this.datasets, checkForEmpty);
+      function checkForEmpty(dataset){
+        if(dataset.hasSuggestions > 0){
+          noSuggestions = false;
+        }
+      }
+      if(noSuggestions && this.templates && this.templates.empty){
+        this.renderGlobalEmpty();
+      }
+    },
+
+    renderGlobalEmpty : function renderGlobalEmpty(){
+      var dataset = this.datasets[0], // use first dataset as element
+          that = this;
+
+      if (!dataset.$el) {
+        return;
+      }
+      dataset.$el.empty();
+      dataset.$el.html(getEmptyHtml(that));
+
+      dataset.trigger("rendered");
+
+      function getEmptyHtml(that) {
+        return that.templates.empty;
+      }
     },
 
     empty: function empty() {

src/typeahead/plugin.js

@@ -38,7 +38,8 @@
           withHint: _.isUndefined(o.hint) ? true : !!o.hint,
           minLength: o.minLength,
           autoselect: o.autoselect,
-          datasets: datasets
+          datasets: datasets,
+          templates: o.sharedTemplates
         });
 
         $input.data(typeaheadKey, typeahead);

src/typeahead/typeahead.js

@@ -25,6 +25,7 @@ var Typeahead = (function() {
     this.isActivated = false;
     this.autoselect = !!o.autoselect;
     this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
+    this.templates = (_.isObject(o.templates)) ? getTemplates(o.templates) : {};
     this.$node = buildDom(o.input, o.withHint);
 
     $menu = this.$node.find('.tt-dropdown-menu');
@@ -56,7 +57,7 @@ var Typeahead = (function() {
 
     this.eventBus = o.eventBus || new EventBus({ el: $input });
 
-    this.dropdown = new Dropdown({ menu: $menu, datasets: o.datasets })
+    this.dropdown = new Dropdown({ menu: $menu, datasets: o.datasets, templates: o.templates })
     .onSync('suggestionClicked', this._onSuggestionClicked, this)
     .onSync('cursorMoved', this._onCursorMoved, this)
     .onSync('cursorRemoved', this._onCursorRemoved, this)
@@ -318,6 +319,14 @@ var Typeahead = (function() {
 
   return Typeahead;
 
+  function getTemplates(templates) {
+    return {
+      empty: templates.empty && _.templatify(templates.empty),
+      header: templates.header && _.templatify(templates.header),
+      footer: templates.footer && _.templatify(templates.footer)
+    };
+  }
+
   function buildDom(input, withHint) {
     var $input, $wrapper, $dropdown, $hint;