将Bootstrap Tokenfield与Bootstrap 3 Typeahead一起使用 [英] Using Bootstrap Tokenfield with Bootstrap 3 Typeahead

问题描述

我已经在我的Web应用程序中集成了 Bootstrap 3 Typeahead 库。我想为文本输入字段添加一个标记系统，所以我研究了 Bootstrap Tokenfield 。我在使两个库相互配合时遇到麻烦。 Tokenfield库正在运行，但是没有出现 Typeahead建议。这是我的输入之一的HTML：

I already have the 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. I am having trouble making the two libraries work with each other. The Tokenfield library is working, but the Typeahead suggestions are not appearing. Here is the HTML for one of my inputs:

<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，用于输入文本：

Here is my JavaScript for the text input:

$(document).ready(function()
{   
    $("#tags-input").tokenfield();
});

我已经研究了一段时间，可以用一只手了。我不确定如何更改HTML / JavaScript以使两个库均正常工作。预先感谢您的帮助！

I have been working on this for a while and could use a hand. I'm not sure how to change my HTML/JavaScript to get both libraries to work. Thanks in advance for any help!

更新（2015年7月20日）

我出现了Bootstrap 3 Typeahead下拉菜单，但该插件无法正常使用。我找不到使用数据属性设置数据源的方法，因此我使用了JavaScript。这是我的新代码：

I got the Bootstrap 3 Typeahead dropdown to appear, but it doesn't work properly with the plugin. I can't find a way to set the data source using data attributes, so I used JavaScript. Here's my new code:

<input name="tags-input" class="form-control" id="tags-input" type="text" autocomplete="off">

这是新的JavaScript：

And here's the new 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中使用数据属性。

At this point I'm wondering if it's even worth it to keep at this. I might switch to the Twitter Typeahead plugin instead. I really like how I can use data attributes with Bootstrap 3 Typeahead, though.

推荐答案

我最终切换到 Bootstrap标签输入插件，因为它与 Bootstrap 3 Typeahead 插件。这是我的用法：

I ended up switching to the Bootstrap Tags Input plugin because it works better with the Bootstrap 3 Typeahead plugin. Here's how I used it:

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 ... ）初始化标签输入插件。之后，每当添加新标签来解决以下问题时，我都会创建一个事件侦听器：

The first block of JavaScript ($("#tags-input").tagsinput...) initializes the Tags Input plugin. After that, I create an event listener for whenever a new tag is added to fix the following problems:

1. 提前隐藏下拉菜单不会隐藏添加标签后


2. 选择了预输入项之后， typeahead值在输入中重复

1. The typeahead dropdown menu does not hide after a tag is added
2. After a typeahead item is selected, the typeahead value is duplicated in the input

如JavaScript注释所示， itemAdded 事件的事件侦听器中的代码隐藏了下拉菜单并清除了重复的输入值。我不完全确定为什么会出现这些行为，但是我猜想它们是由于更新的jQuery库导致的。

As can be seen in the JavaScript comments, the code in the event listener for the itemAdded event hides the dropdown menu and clears the duplicate input value. I'm not entirely sure why these behaviors are exhibited, but I'm guessing they are a result of an updated jQuery library.

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

The solution above works flawlessly for me in my testing. Hopefully this helps someone else!

这篇关于将Bootstrap Tokenfield与Bootstrap 3 Typeahead一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！