Merge pull request twitter#1182 from jharding/964-escape-html-chars

Escape html chars from display value when using default template

Author: jharding

doc/jquery_typeahead.md

@@ -169,8 +169,8 @@ Datasets can be configured using the following options.
 
   * `suggestion` – Used to render a single suggestion. If set, this has to be a 
     precompiled template. The associated suggestion object will serve as the 
-    context. Defaults to the value of `display` wrapped in a `p` tag i.e. 
-    `<p>{{value}}</p>`.
+    context. Defaults to the value of `display` wrapped in a `div` tag i.e. 
+    `<div>{{value}}</div>`.
 
 ### Custom Events
 

src/typeahead/dataset.js

@@ -318,7 +318,7 @@ var Dataset = (function() {
     };
 
     function suggestionTemplate(context) {
-      return '<div><p>' + displayFn(context) + '</p></div>';
+      return $('<div>').text(displayFn(context));
     }
   }
 

test/typeahead/dataset_spec.js

@@ -4,7 +4,7 @@ describe('Dataset', function() {
   mockSuggestions = [
     { value: 'one', raw: { value: 'one' } },
     { value: 'two', raw: { value: 'two' } },
-    { value: 'three', raw: { value: 'three' } }
+    { value: 'html', raw: { value: '<b>html</b>' } }
   ];
 
   mockSuggestionsDisplayFn = [
@@ -53,7 +53,14 @@ describe('Dataset', function() {
 
       expect(this.dataset.$el).toContainText('one');
       expect(this.dataset.$el).toContainText('two');
-      expect(this.dataset.$el).toContainText('three');
+      expect(this.dataset.$el).toContainText('html');
+    });
+
+    it('should escape html chars from display value when using default template', function() {
+      this.source.andCallFake(syncMockSuggestions);
+      this.dataset.update('woah');
+
+      expect(this.dataset.$el).toContainText('<b>html</b>');
     });
 
     it('should respect limit option', function() {
@@ -340,7 +347,7 @@ describe('Dataset', function() {
       runs(function() {
         expect(this.dataset.$el).toContainText('one');
         expect(this.dataset.$el).toContainText('two');
-        expect(this.dataset.$el).toContainText('three');
+        expect(this.dataset.$el).toContainText('html');
         expect(this.dataset.$el).not.toContainText('four');
         expect(this.dataset.$el).not.toContainText('five');
       });