Question

在我的一个项目中，我曾经在bootstrap-2.3.2中使用bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput。最近我更新了两个（bootstrap为3，tagsinsput为0.3.9）。在更新期间，我发现外部的tagsinput取决于http://twitter.github.io/typeahead.js/。

我尝试根据文档使用bs-tagsinput和typeahead。那有点颠簸。例如，bootstrap-tagsinput docs下的预先输入代码示例：

$('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 ver 1.0中不再存在（它在ver 0.9中）。我对数据集使用typeahead.source方法。来自'source'的typeahead没有在0.9中实现，因此降级似乎不是一个选项。我不确定是否用typeahead ['val']替换它（尽管两者都没有解决我看到的问题）。至于CSS，我从bootstrap-tagsinput docs页面复制了它 - 不确定这是否意图（我是一个新手，所以我不知道更好）。

问题是，在把所有东西放在一起之后，我遇到了错误的行为（如预期的那样）。具体来说，我在插入标签（输入一个单词并按下回车）后面临一个问题：（1）tt -down-down菜单应该消失但是没有。它与之前的tt-suggestions列表一起发布和（2）应清除tt-hint字段，但不是

如果我使用箭头选择其中一个tt-suggestions

，那么就不会发生这个问题。

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

Answer 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/

Answer 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！

bootstrap-tagsinput with typeahead，bootstrap-3

2 个答案: