从 bootstrap 标签库调用 "add" 方法

Question

所以我正在使用一个名为 bootstrap-tag 的库（不要与 bootstrap-tags <-plural 混淆）。这是它的存储库：https://github.com/fdeschenes/bootstrap-tag

我正在尝试构建标签将从其他输入字段获得的值，然后通过单击按钮将该标签添加到标签输入字段。

我首先尝试查看是否可以访问元素的原型并从那里获取 add 方法。但我只能得到 jquery 元素的原型。我不包括代码的唯一原因是因为我正在使用 Ember.js 并且不希望这可能使我遇到的实际问题复杂化。如果包含代码对我有好处，请告诉我，我会将其添加到问题中。

在标签输入字段中输入时，它工作得很好。如何从字段外部构建值并添加标签？

此外，我打算使用的添加方法位于第 3 方库的这一行： https://github.com/fdeschenes/bootstrap-tag/blob/master/js/bootstrap-tag.js#L136

Answer 1

这个库没有为此提供 API.. 但是您可以轻松破解它 ;)

<input id="test-input" />

var tags = new $.fn.tag.Constructor(document.getElementById('test-input'), {});
tags.add('Hack');
tags.add('it');
tags.add('easily');

或者您可以这样做：

var tagsElement = $('.tags-input').tag(options);

addTagToElement(tagsElement, 'Whatever');   

function addTagToElement(el, newTag) {
   var e = $.Event('keydown');
   e.keyCode = 13;
   el.next().val(newTag);
   el.next().trigger(e)
}

这个库在第一个定义的旁边创建一个占位符输入，甚至听 keydown.. 所以 addTagToElement 片段简单地模拟了这个..

从 bootstrap 标签库调用 "add" 方法

Calling "add" method from bootstrap-tag library

javascript

twitter-bootstrap

bootstrap-tags-input