title: Using Bootstrap Tokenfield with Bootstrap 3 Typeahead
body: <p>I already have the <a href="https://github.com/bassjobsen/Bootstrap-3-Typeahead" rel="nofollow">Bootstrap 3 Typeahead</a> library integrated into my web app. I want to include a tagging system for text input fields, so I looked into <a href="https://github.com/sliptree/bootstrap-tokenfield" rel="nofollow">Bootstrap Tokenfield</a>. I am having trouble making the two libraries work with each other. The Tokenfield library is working, but the Typeahead suggestions are not appearing. Here is the HTML for one of my inputs:</p>
  
  <pre><code>&lt;input name="tags-input" class="form-control" id="tags-input" type="text" data-source='["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"]' data-provide="typeahead" data-items="4" autocomplete="off"&gt;
  </code></pre>
  
  <p>Here is my JavaScript for the text input:</p>
  
  <pre><code>$(document).ready(function()
  {   
      $("#tags-input").tokenfield();
  });
  </code></pre>
  
  <p>I have been working on this for a while and could use a hand. I'm not sure how to change my HTML/JavaScript to get both libraries to work. Thanks in advance for any help!</p>
  
  <p><strong>UPDATE (July 20, 2015)</strong></p>
  
  <p>I got the Bootstrap 3 Typeahead dropdown to appear, but it doesn't work properly with the plugin. I can't find a way to set the data source using data attributes, so I used JavaScript. Here's my new code:</p>
  
  <pre><code>&lt;input name="tags-input" class="form-control" id="tags-input" type="text" autocomplete="off"&gt;
  </code></pre>
  
  <p>And here's the new JavaScript:</p>
  
  <pre><code>$(document).ready(function()
  {   
      $("#tags-input").tokenfield(
      {
          typeahead: { source: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"] }
      });
  });
  </code></pre>
  
  <p>At this point I'm wondering if it's even worth it to keep at this. I might switch to the Twitter Typeahead plugin instead. I really like how I can use data attributes with Bootstrap 3 Typeahead, though.</p>