Использование Bootstrap Tokenfield с начальной загрузкой 3

Question

У меня уже есть библиотека Bootstrap 3 Typeahead, интегрированная в мое веб-приложение. Я хочу включить систему тегов для полей ввода текста, поэтому я заглянул в Bootstrap Tokenfield. У меня проблемы с тем, чтобы две библиотеки работали друг с другом. Библиотека Tokenfield работает, но предложения Typeahead не появляются. Вот HTML для одного из моих входов:

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

Вот мой JavaScript для ввода текста:

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

Я работал над этим некоторое время и мог бы использовать руку. Я не уверен, как изменить мой HTML/JavaScript, чтобы обе библиотеки работали. Заранее благодарю за любую помощь!

ОБНОВЛЕНИЕ (20 июля 2015 г.)

Я получил выпадающий список Bootstrap 3 Typeahead, но он не работает должным образом с плагином. Я не могу найти способ установить источник данных, используя атрибуты данных, поэтому я использовал JavaScript. Вот мой новый код:

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

И вот новый JavaScript:

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

На данный момент я задаюсь вопросом, стоит ли вообще этого придерживаться. Я мог бы вместо этого переключиться на плагин Twitter Typeahead. Мне действительно нравится, как я могу использовать атрибуты данных с Bootstrap 3 Typeahead.

Answer 1

В итоге я переключился на плагин Bootstrap Tags Input, потому что он лучше работает с плагином Bootstrap 3 Typeahead. Вот как я это использовал:

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("");
    });
});

Первый блок JavaScript ($("#tags-input").tagsinput...) инициализирует плагин для ввода тегов. После этого я создаю прослушиватель событий для каждого добавленного нового тега, чтобы исправить следующие проблемы:

1. Раскрывающееся меню typeahead не скрывается после добавления тега
2. После того, как элемент typeahead выбран, значение typeahead дублируется во входных данных

Как видно из комментариев JavaScript, код в прослушивателе событий для itemAdded Событие скрывает выпадающее меню и очищает повторяющиеся значения ввода. Я не совсем уверен, почему эти поведения выставлены, но я предполагаю, что они являются результатом обновленной библиотеки jQuery.

Решение выше работает безупречно для меня в моем тестировании. Надеюсь, это поможет кому-то еще!