使用 Bootstrap Tokenfield 和 Bootstrap 3 Typeahead

Question

我已经有了 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。我无法让这两个库相互协作。 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 以使两个库都能正常工作。在此先感谢您的帮助！

更新（2015 年 7 月 20 日）

我看到了 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 plugin because it works better with the 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...）的第一块初始化标签输入插件。之后，每当添加新标签时我都会创建一个事件侦听器来解决以下问题：

添加标签后预输入下拉菜单不隐藏
选择预输入项目后，

正如在 JavaScript 评论中所见，itemAdded 事件的事件侦听器中的代码隐藏了下拉菜单并清除了重复的输入值。我不完全确定为什么会出现这些行为，但我猜它们是更新的 jQuery 库的结果。

上述解决方案在我的测试中完美无缺。希望这对其他人有帮助！

使用 Bootstrap Tokenfield 和 Bootstrap 3 Typeahead

Using Bootstrap Tokenfield with Bootstrap 3 Typeahead

javascript

twitter-bootstrap

bootstrap-typeahead

bootstrap-tokenfield

bootstrap-tags-input