bootstrap-tags 预输入，bootstrap-3答案

【问题标题】：bootstrap-tagsinput with typeahead, bootstrap-3bootstrap-tags 预输入，bootstrap-3
【发布时间】：2014-02-08 01:35:16
【问题描述】：

在我的一个项目中，我曾经在 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 代码示例：

$('input').tagsinput('input').typeahead({
  prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {  
  this.tagsinput('add', datum.value);
  this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));
</script>

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

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

如果我使用箭头选择一个 tt 建议，则不会发生此问题可能很有用

有谁知道取回 tagsinput-w/typeahead 功能的最佳方法是什么？

【问题讨论】：

尝试“this.tagsinput('input').typeahead('val', '');”而不是用于清除输入的 setQuery。

标签： twitter-bootstrap-3 bootstrap-typeahead typeahead twitter-typeahead jquery-tags-input

【解决方案1】：

twitter.github.io/typeahead.js 与 bootstrap 3 不兼容。

您可以使用与 twitter bootstrap 3 兼容的 Typeahead

https://github.com/bassjobsen/Bootstrap-3-Typeahead

实际上开发者将 bootstrap 2 代码迁移到 bootstrap 3 中，这里是详细信息http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

【讨论】：

太好了，我只在引导程序中使用了预输入，但没有工作。

【解决方案2】：

经过更多挖掘，我在这里找到了答案： Where is the typeahead JavaScript module in Bootstrap 3 RC 1?

长话短说，bootstrap-tagsinput 和 typeahead.js 1.0 似乎因为 css/其他不兼容而无法正常运行。

这个项目https://github.com/bassjobsen/Bootstrap-3-Typeahead（谢谢@bassjobsen）为我解决了这个问题。它将 bootstrap-typeahead 从 2.3.2 反向移植到 bootstrap-3（API 未更改），到目前为止它与 bootstrap-tagsinput 配合良好！

【讨论】：

如何从 tagsinput 中调用 typeahead？
我不确定，我按原样使用 bootstrap-tagsinput，它开箱即用
我已经成功了。感谢您的回复。我认为当您使用 Bootstrap 2 中的示例时它可以工作。我正在尝试使用您链接的预先输入的 Bootstrap 3 中的示例。
啊，是的。由于 bootstrap-tagsinput 是向后移植的，因此需要像在 bootstrap-2.3.2 中使用它一样使用它
另见：github.com/bassjobsen/Bootstrap-3-Typeahead/issues/40。你可以使用$('.typeahead').tagsinput({typeahead : { source: ["Alabama","Alaska"] }});