diff --git a/src/typeahead/dataset.js b/src/typeahead/dataset.js index ba0b3418..e32d8bac 100644 --- a/src/typeahead/dataset.js +++ b/src/typeahead/dataset.js @@ -29,9 +29,9 @@ var Dataset = (function() { this.name = o.name || _.getUniqueId(); this.source = o.source; - this.valueKey = o.displayKey || 'value'; + this.displayFn = getDisplayFn(o.display || o.displayKey); - this.templates = getTemplates(o.templates, this.valueKey); + this.templates = getTemplates(o.templates, this.displayFn); this.$el = $(html.dataset.replace('%CLASS%', this.name)); } @@ -107,7 +107,7 @@ var Dataset = (function() { outerHtml = html.suggestion.replace('%BODY%', innerHtml); $el = $(outerHtml) .data(datasetKey, that.name) - .data(valueKey, suggestion[that.valueKey]) + .data(valueKey, that.displayFn(suggestion)) .data(datumKey, suggestion); $el.children().each(function() { $(this).css(css.suggestionChild); }); @@ -166,7 +166,15 @@ var Dataset = (function() { // helper functions // ---------------- - function getTemplates(templates, valueKey) { + function getDisplayFn(display) { + display = display || 'value'; + + return _.isFunction(display) ? display : displayFn; + + function displayFn(obj) { return obj[display]; } + } + + function getTemplates(templates, displayFn) { return { empty: templates.empty && _.templatify(templates.empty), header: templates.header && _.templatify(templates.header), @@ -175,7 +183,7 @@ var Dataset = (function() { }; function suggestionTemplate(context) { - return '
' + context[valueKey] + '
'; + return '' + displayFn(context) + '
'; } } diff --git a/test/dataset_view_spec.js b/test/dataset_view_spec.js index 5ed5c199..56409b97 100644 --- a/test/dataset_view_spec.js +++ b/test/dataset_view_spec.js @@ -37,6 +37,21 @@ describe('Dataset', function() { expect(this.dataset.getRoot()).toContainText('three'); }); + it('should allow custom display functions', function() { + this.dataset = new Dataset({ + name: 'test', + display: function(o) { return o.display; }, + source: this.source = jasmine.createSpy('source') + }); + + this.source.andCallFake(fakeGetForDisplayFn); + this.dataset.update('woah'); + + expect(this.dataset.getRoot()).toContainText('4'); + expect(this.dataset.getRoot()).toContainText('5'); + expect(this.dataset.getRoot()).toContainText('6'); + }); + it('should render empty when no suggestions are available', function() { this.dataset = new Dataset({ source: this.source, @@ -167,6 +182,10 @@ describe('Dataset', function() { ]); } + function fakeGetForDisplayFn(query, cb) { + cb([{ display: '4' }, { display: '5' }, { display: '6' } ]); + } + function fakeGetWithSyncEmptyResults(query, cb) { cb(); }