title: Twitter typeahead add custom data to dataset
body: <p>I am using <code>twitter typeahead</code> to show category suggestions which works fine for me. 
   The problem is with the display of sub-categories. If a <code>category has sub-categories</code>
   <code>then expand/collapse icon</code> is shown along with the suggestion, if the user selects one them the sub-categories has to be shown below it, i have succeeded in the display part but <code>cannot update the dataset</code> of typeahead so that when the user selects one the sub-categories it should be displayed in the input. <code>Please use keyboard on Jsfiddle because i have tried only in keypress</code>. The following is my json array </p>
  
  <p>JSFIDDLE <a href="http://jsfiddle.net/e0zqL2qd/2/" rel="noreferrer">here</a></p>
  
  <pre><code>[{
      "id": "38",
      "value": "Entertaintment",
      "parent_id": "27",
      "children": "1",
      "childCategories": [{
          "id": "28",
          "value": "Movies",
          "parent_id": "38"
      }, {
          "id": "29",
          "value": "Sports",
          "parent_id": "38"
      }]
  }, {
      "id": "40",
      "value": "eeen",
      "parent_id": "27",
      "children": "1",
      "childCategories": [{
          "id": "41",
          "value": "een child 1",
          "parent_id": "40"
      }]
  }, {
      "id": "41",
      "value": "een child 1",
      "parent_id": "40",
      "children": "0",
      "childCategories": false
  }]
  </code></pre>
  
  <p>I have tried the following:</p>
  
  <pre><code>_onEnterKeyed: function onEnterKeyed(type, $e) {
      var cursorDatum, topSuggestionDatum;
      cursorDatum = this.dropdown.getDatumForCursor();
      topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
      //My custom condition, if category has children show sub-categories below 
      if (cursorDatum.raw &amp;&amp; cursorDatum.raw.children == "1") {
          //below line is my failed try  
          //this.dropdown.updateChild('',cursorDatum.raw.childCategories,false); 
          var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
          var childHTML='';
          $('.ttchild').remove();
          //adding the sub-categories to dropdown
          $.each(cursorDatum.raw.childCategories,function(i,v){
              childHTML += '&lt;div class="tt-suggestion ttchild"&gt;&lt;div class="suggestions"&gt;&lt;span&gt;'+this.value+'&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;';
          });
          $(childHTML).insertAfter('.tt-cursor');
          return;
      }
  
      if (cursorDatum) {
          this._select(cursorDatum);
          $e.preventDefault();
      } 
      else if (this.autoselect &amp;&amp; topSuggestionDatum) {
          this._select(topSuggestionDatum);
          $e.preventDefault();
      }
  },
  
  //This is my custom function trying to update the dataset, but i know its totally wrong.
  updateChild: function updateChild(query,childs) {
      var that = this;
      this.query = query;
      this.canceled = false;
      this.source(query, render);
  
      function render(childs) {
          if (!that.canceled &amp;&amp; query === that.query) {
              that._render(query, childs);
          }
      }
  },
  </code></pre>
  
  <p>JSFIDDLE <a href="http://jsfiddle.net/e0zqL2qd/2/" rel="noreferrer">here</a></p>
  
  <p>e.g: The Entertainment category has subcategories movies and sports.</p>
  
  <p>Hope any one would help me....</p>