0

我已经将Bootstrap 3 Typeahead库集成到我的 Web 应用程序中。我想为文本输入字段包含一个标记系统，所以我研究了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 中使用数据属性。

4

1 回答 1

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. 选择一个预先输入的项目后，预先输入的值在输入中重复

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

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

于 2015-07-21T23:29:52.290 回答