javascript - 将 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 以使这两个库都能工作。预先感谢您的帮助!

更新(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插件，因为它与 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 的第一个 block ($("#tags-input").tagsinput...) 初始化标签输入插件。之后，每当添加新标签时，我都会创建一个事件监听器，以解决以下问题:

1. 添加标签后，预输入下拉菜单不会隐藏
2. 选择预输入项目后，typeahead value is duplicated in the input

从 JavaScript 注释中可以看出，itemAdded 事件的事件监听器中的代码隐藏了下拉菜单并清除了重复的输入值。我不完全确定为什么会出现这些行为，但我猜测它们是更新的 jQuery 库的结果。

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