5

在我的一个项目中，我曾经在 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 文档页面复制了它——不确定这是不是目的（我是新手，所以我不知道更好）。

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

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

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

4

2 回答 2

5

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/

于 2014-04-13T13:37:13.713 回答
1

经过一番挖掘，我在这里找到了答案： Bootstrap 3 RC 1 中的 typeahead JavaScript 模块在哪里？

长话短说，看起来 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 配合得很好！

于 2014-02-08T05:29:48.773 回答