Использование Bootstrap Tokenfield с Bootstrap 3 Typeahead

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, чтобы заставить обе библиотеки работать. Заранее благодарю за любую помощь!

UPDATE (20 июля 2015)

Я получил Bootstrap 3 машинописный ниспадающее меню, чтобы появиться, но это не работает должным образом с плагином. Я не могу найти способ установить источник данных с использованием атрибутов данных, поэтому я использовал 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. Меню машинописного выпадающее не скрывает после тега добавляются
2. После пункта машинописного выбрана, typeahead value is duplicated in the input

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

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