title: bootstrap typeahead tags input with JSON data
body: <p>I have kinda hit a roadblock when porting my working solution onto my meteor app.</p>
  
  <p>The typeahead and tags input plugin works fine on my local PC but when I port it to meteor.js it breaks it somehow. I have added all the things that are identical to the fiddle </p>
  
  <p><a href="http://jsfiddle.net/chou_one/Xss96/4/" rel="nofollow">http://jsfiddle.net/chou_one/Xss96/4/</a></p>
  
  <p>(you can view the resources attached via dropbox)</p>
  
  <p>All the JS code is wrapped inside my rendered function</p>
  
  <pre><code>var elt = $('.tags-typeahead');
  
  elt.tagsinput();
  elt.tagsinput('input').typeahead({
    prefetch: '/assets/tags.json'
  }).bind('typeahead:selected', $.proxy(function (obj, datum) {  
      this.tagsinput('add', datum.value);
      this.tagsinput('input').typeahead('setQuery', '');
  }, elt));
  </code></pre>
  
  <p>tags.json is stored inside client/assets/tags.json</p>
  
  <p>When I load it up I get the following errors on my console</p>
  
  <pre><code>Exception from Deps afterFlush function: Error: one of local, prefetch, or remote is required
      at Function.jQuery.extend.error (http://192.168.0.11:3000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:281:9)
      at new Dataset (http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:382:19)
      at http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:1085:67
      at Object.jQuery.extend.map (http://192.168.0.11:3000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:544:13)
      at methods.initialize (http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:1084:34)
      at jQuery.fn.typeahead (http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:1135:43)
  </code></pre>
  
  <p>a thing to note is that this only works with typeahead version 0.9.3. If I use the latest one it just stops working! The bootstrap-3 typeahead version also does not seem to work as well. jQuery version is 1.11.0</p>
  
  <p>I am pretty sure it's some issue with the meteor config as all the files and code copied over is identical to the working copy. My meteor version is 0.70 template-engine-preview-release-10.1 (if that helps any further?)</p>
  
  <p>**</p>
  
  <h1>UPDATE</h1>
  
  <p>**</p>
  
  <p>The plugins I am using are not compatible with the new typeahead    version. So I managed to look at tokenfield plugin. EDIT - Title    also changed <br>
  2. This works well with the new typeahead so it achieves what I want.    Now, I need some guidance on how to load the JSON object properly in    the Bloodhound engine (tried multiple times but no luck and my JSON    is valid) it does not give any autosuggestions <br>
  3. if this works on my standalone environment I'm quite confident it    will work with within the meteor app <br></p>
  
  <pre><code>var engine = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.taglist); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: { url: 'tag.json'}
  //remote: 'tag.json'    
  });
  engine.initialize();
  
  $('#tokenfield-typeahead').tokenfield({
  typeahead: {
  source: engine.ttAdapter()
  }
  });
  </code></pre>
  
  <p>My JSON</p>
  
  <pre><code>{
      "taglist": [
          "Birthday &amp; Special Events",
          "Portrait &amp; Family",
          "Fashion",
          "Product"
      ]
  }
  </code></pre>
  
  <p>my fiddle is updated <a href="http://jsfiddle.net/chou_one/Xss96/7/" rel="nofollow">http://jsfiddle.net/chou_one/Xss96/7/</a></p>