问题标签 [jquery-tags-input]

我正在使用 jQuery-Tags-Input 插件：Github page / Demo。

您可以在演示中注意到，当您按enter 以及,时，会提交当前标签。当您按 时，我也希望如此;。默认情况下，当您按下 时;，它被视为标签的一部分。

我在选项中找不到这个。除了直接调整代码还有其他方法吗？有人已经做过了吗？

我正在尝试开发具有以下功能的页面：

页面将有两列：一列是#origin（左列），包含一个矩形列表（代表变量），第二列是#drop（右列），包含可以放置矩形的输入。

为了得到我想要的结果，我想到了使用两个插件：jquery ui draggable和jQuery Tokeninput

问题是，一旦我将一个矩形（<li>）放入输入字段中，我该如何做到这一点，它会显示为一个标签。使用相同的<li>元素也可以，只要我可以在输入中输入更多文本（以完成公式），如果稍后用户改变主意并决定变量（标签）不是他或者她想要，页面应该允许他们删除标签（通过单击右上角的“X”或将标签返回到左列的原始位置）

有人已经做过类似的事情并且可以给我一些指导吗？或者有人对此有其他想法？

任何帮助是极大的赞赏。

PS如果您知道任何其他可以在同一输入中组合文本和标签的标记插件，请告诉我。

我有一点麻烦。有标签输入的工作代码，我知道如何使用 jquery ui 的自动完成功能。

代码示例

两者都不

也不

似乎工作。

在tagsinput 站点上有一个示例，它需要自动完成 URL，但我想使用加载的数组，就像在自动完成示例中一样。我尝试了不同的选择，没有一个有效。有没有这样的方法？

我正在使用带有Simple_form和act_as_taggable的Rails 4。

我正在尝试为我的标签 (atcs_as_taggable)实现jQuery 标签输入。

Tags_input的 HTML是：

翻译为Simple_form：

我在更改之前输入的标签正确显示在编辑/表单中，但新标签未保存。

我的 Tags_input 的 JS 很简单：

我错过了什么？

我是 RoR 和 JS 的新手，可以使用一些帮助来理解其中一些部分是如何组合在一起的。我已经阅读了许多资源，并且我认为我知道该怎么做，但是仍然有一些东西在逃避我。

我想创建一个用于输入标签的界面，就像 Stack Overflow 上的界面一样。我发现以下插件具有我最终想要摆弄的所有功能： //xoxco.com/projects/code/tagsinput/

所以这就是我所做的：

1）我下载了压缩包。
2）我将jquery.tagsinput.js和jquery.tagsinput.min.js放入vendor/assets/javascripts。
3）我将jquery.tagsinput.css放入vendor/assets/stylesheets。
4) 在我的views/nuggets/index.html.erb中，我添加了<input name="tags" id="tags" value="foo,bar,baz" />
5) 在我的app/assets/javascripts/nuggets.js.coffee中，我添加了$('#tags').tagsInput();

当我注意到输入没有按预期工作时，我检查了页面的源代码并注意到以下行不存在：
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

结果，我认为我应该添加到 //= require jquery.tagsinputapp /assets/javascripts/application.js和app/assets/stylesheets/application.css。*= require jquery.tagsinput

我敢肯定，回想起来，这一切似乎都很微不足道，但我现在很迷茫。

谢谢你的帮助，

禾本科

编辑，为@user1965817 添加信息：app/assets/javascripts/application.js
的内容：

app/assets/stylesheets/application.css的内容：

我正在使用带有 jquery 1.10 的 bootstrap 3，并且正在尝试使用标签输入插件（http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/），但它不起作用。这是我的错误：

这是我的html代码：

请问，有什么建议吗？

我正在使用 bootstrap 3.0.0，并且正在尝试使用 tagsinput 插件（http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/）与 popover 结合用于文本输入，但 popover 没有有效。知道如何将这两个插件结合起来吗？

如果我删除标签输入，弹出框工作正常。

在我的流星项目中，我使用的是 bootstrap-tagsinput 插件：

http://timschlechter.github.io/bootstrap-tagsinput/examples/

我在'typeahead'模式下使用它，因此它需要初始化，如下所示：

我无法弄清楚将它与流星集成的最佳方法是什么——所以我正在寻求建议。

我尝试了几种方法：

(1) 将初始化代码放在包含输入元素的模板的.created中：

这似乎很自然。但是，当模板重新渲染时，初始化数据会丢失，输入元素不会像标签输入一样。

(2) 与 (1) 相同，但添加 {{#constant}} 指令。{{#constant}} 指令防止根据流星文档重新渲染。如果插件只初始化一次并且从不重新渲染，则该插件应该可以工作：

（顺便说一句，添加 div 是有原因的，请参阅：）

这失败了：

异常堆栈是无用的（主要是“火花”代码），所以我最终放弃了这条路（但我怀疑这仍然是最好的方法，只要我能让它工作）。

（3）在.rendered函数中初始化tagsinput：

这也失败了，因为插件只接受一次初始化。第二次初始化将不起作用：它期望 tagsinput() arg 是一个函数属性名称并尝试执行它（或类似的东西）。

(4) 我想我会采取 (3) 进一步并通过删除初始化数据来超越它：

这将清除输入元素处的 data['tagsinput'] 并允许重复的 tagsinput 初始化。一旦 data['tagsinput'] 不存在，初始化就会进行并重新创建它。这个技巧几乎解决了它，除了一个小的副作用：一个自动生成的 div 元素在 DOM 中徘徊。tagsinput 插件的工作方式是在 input 元素之后添加一个兄弟 div：

一旦解决方案尝试 (4) 运行，偶尔的 div 将与新生成的 div 一起保留在 dom 中。此时我开始觉得这个解决方案不符合流星精神，但我决定尝试使用以下方法摆脱挥之不去的 div：

这段代码完成了工作，但它非常hackish，并且在更新流星或标签输入时可能会中断。

如果你们中的任何一个流星忍者都能说出初始化标签输入的正确方法，那就太棒了！

在我的一个项目中，我曾经在 bootstrap-2.3.2 上有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput。最近我都更新了（bootstrap 到 3，tagsinput 到 0.3.9）。在更新期间，我发现 tagsinput 外部依赖于http://twitter.github.io/typeahead.js/。

根据文档，我尝试将 bs-tagsinput 与 typeahead 一起使用。那有点颠簸。例如 bootstrap-tagsinput 文档下的 typeahead 代码示例：

typeahead['setQuery']在 typeahead 版本 1.0 中不再存在（它在版本 0.9 中存在）。我对数据集使用 typeahead.source 方法。在 0.9 中未实现来自“源”的预输入，因此降级似乎不是一种选择。我不确定是否用 typeahead['val'] 替换它（虽然，两者都没有解决我看到的问题）。至于 CSS，我从 bootstrap-tagsinput 文档页面复制了它——不确定这是不是目的（我是新手，所以我不知道更好）。

问题是，在把所有东西放在一起之后，我遇到了错误的行为（如预期的那样）。具体来说，我面临一个问题，在插入标签（键入一个单词并按 Enter）后：（1） tt-dropdown-menu 应该消失但它不会。它与之前的 tt-suggestions 列表保持一致，并且 (2) 应清除 tt-hint 字段，但不是

如果我使用箭头选择其中一个 tt-suggestions，则可能会提到不会发生此问题。

任何人都知道取回 tagsinput-w/typeahead 功能的最佳方法是什么？

我在我的网站中为三个不同的类别实施了一个标签系统。我为 Twitter 帐户设置了它，所以我有“关键字”、“提及”和“标签”。我需要的是，当用户在text inputfor Mentions中将标签插入到prepend输入文本之前的“@”符号中时。除了“#”符号外，主题标签也是如此。我已经整理了一个演示，展示了我到目前为止所拥有的东西。任何帮助将不胜感激。

JSFIDDLE