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块（$("#tags-input").tagsinput...）初始化Tags Input插件。之后，每当添加新标记以修复以下问题时，我都会创建一个事件监听器：

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

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

在我的测试中，上面的解决方案对我来说完美无瑕。希望这有助于其他人！

使用Bootstrap Tokenfield和Bootstrap 3 Typeahead

1 个答案: