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

У меня уже есть библиотека 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.


javascript twitter-bootstrap bootstrap-typeahead bootstrap-tags-input bootstrap-tokenfield
person Alexander    schedule 19.07.2015    source источник
comment
Токенфилд показывает, как они работают вместе в своих демоверсиях.   -  person sharf    schedule 19.07.2015
comment
@sharf Спасибо за комментарий. Я просмотрел демоверсии, но не похоже, что это работает так же, как с библиотекой Bootstrap 3 Typeahead. Любая дальнейшая помощь будет принята с благодарностью.   -  person Alexander    schedule 21.07.2015

Ответы (1)


arrow_upward
1
arrow_downward

В итоге я переключился на плагин Ввод тегов Bootstrap, потому что он лучше работает с плагин 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 значение typeahead дублируется во входных данных

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

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

person Alexander    schedule 21.07.2015