bootstrap-tagsinput with typeahead,bootstrap-3

Question

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

我尝试根据文档使用bs-tagsinput和typeahead.那有点颠簸.例如,bootstrap-tagsinput docs下的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 ver 1.0中(它在ver 0.9中).我对数据集使用typeahead.source方法.来自'source'的typeahead没有在0.9中实现,因此降级似乎不是一个选项.我不确定是否用typeahead ['val']替换它(尽管两者都没有解决我看到的问题).至于CSS,我从bootstrap-tagsinput docs页面复制了它 - 不确定这是意图(我是新手,所以我不知道更好).

问题是,把所有东西放在一起后,我遇到了错误的行为(如预期的那样).具体来说,我遇到一个问题,插入标签后(输入一个单词并按下输入):( 1)tt-dropdown-menu应该消失,但事实并非如此.它与之前的tt-suggestions列表一起保持不变,并且(2)tt-hint字段应该被清除但不是

如果我使用箭头选择其中一个tt-advice,就不会发生这个问题

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

Answer 1

该twitter.github.io/typeahead.js自举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 配合得很好！