Using Bootstrap Tokenfield with Bootstrap 3 Typeah

Question

I already have the Bootstrap 3 Typeahead library integrated into my web app. I want to include a tagging system for text input fields, so I looked into Bootstrap Tokenfield. 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:

<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">

Here is my JavaScript for the text input:

$(document).ready(function()
{   
    $("#tags-input").tokenfield();
});

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!

UPDATE (July 20, 2015)

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:

<input name="tags-input" class="form-control" id="tags-input" type="text" autocomplete="off">

And here's the new JavaScript:

$(document).ready(function()
{   
    $("#tags-input").tokenfield(
    {
        typeahead: { source: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"] }
    });
});

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.

Answer 1

I ended up switching to the Bootstrap Tags Input plugin because it works better with the Bootstrap 3 Typeahead plugin. Here's how I used it:

HTML

<input name="tags-input" class="form-control" id="tags-input" type="text" autocomplete="off">

JavaScript

$(document).ready(function()
{   
    $("#tags-input").tagsinput(
    {
        typeahead: { source: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"] }
    });

    // Handle the event that fires when a tag is added
    $("#tags-input").on('itemAdded', function(event)
    {
        // Hide the Bootstrap 3 Typeahead dropdown menu since it doesn't hide automatically for some reason
        $(".typeahead.dropdown-menu").hide();

        // Clear the value of the tagsinput's internal <input> element, which is used for adding tags
        $(this).tagsinput('input').val("");
    });
});

The first block of JavaScript ($("#tags-input").tagsinput...) initializes the Tags Input plugin. After that, I create an event listener for whenever a new tag is added to fix the following problems:

1. The typeahead dropdown menu does not hide after a tag is added
2. After a typeahead item is selected, the typeahead value is duplicated in the input

As can be seen in the JavaScript comments, the code in the event listener for the itemAdded event hides the dropdown menu and clears the duplicate input value. I'm not entirely sure why these behaviors are exhibited, but I'm guessing they are a result of an updated jQuery library.

The solution above works flawlessly for me in my testing. Hopefully this helps someone else!