Bootstrap 3 RC 1 中的 typeahead JavaScript 模块在哪里？

Posted 2023-05-08

【中文标题】Bootstrap 3 RC 1 中的 typeahead JavaScript 模块在哪里？

【英文标题】：Where is the typeahead JavaScript module in Bootstrap 3 RC 1?

【发布时间】：2013-07-28 00:56:37

【问题描述】：

如您所知，Bootstrap RC 1 就在这里，我一直在阅读这个新框架中的所有新功能。但是你猜怎么着，typehead 不在文档中。有人知道这是出于什么原因吗？

我在谷歌搜索时发现these examples，并且我读到in this post 他们改变了字体引导程序。那么我必须手动添加它还是它也在 Bootstrap 3 捆绑包中？

有人知道吗？

【问题讨论】：

我还发现很多东西都消失了，例如导航类、预输入、受控表单输入宽度、搜索框、子菜单。更改类以使其复杂，例如 icon- 到 .glyphicon，span 到 col-lg-xxxxx？我会在这方面归功于 jquery 或 google 政策，我的意思是提供足够的向后兼容性，以便人们可以坚持使用您的产品。而不是把你的想法强加给别人，然后用“我们认为不需要”这些话来判断你是谁来判断。所以这个改变政策更多的是微软的东西。他们不断改变事物，我们开发人员总是不断学习和浪费时间。地狱！

有人将预输入添加回 Bootstrap 3 here

这适用于旧的 bo​​otstrap2 代码，无需更新。只需在 bootstrap 3 加载后包含额外的 js 文件。

这解决了我与timschlechter.github.io/bootstrap-tagsinput/examples 的问题，谢谢！

【参考方案1】：

我相信它已被弃用，取而代之的是 Twitter 出色的 typeahead.js。他们的文档有 a Bootstrap integration section 应该会有所帮助。

编辑： Twitter 已删除集成说明。目前尚不清楚这是否是在与 Bootstrap 3.0 兼容的版本之前的临时版本，或者它是否已经一去不复返了，但@drye 链接到http://www.aureliomerenda.com/install-typeahead-bootstrap-3-fix-css-overlay-width-100/ 的有用替代品。

【讨论】：

这里是官方弃用通知：getbootstrap.com/getting-started/#migration-notes

警告：截至 2013 年 10 月 24 日，typeahead.js 已经过时了 3-4 个月。希望他们能重新开始。 github.com/twitter/typeahead.js/issues/489

@JakeHarding 将于 1 月初发布新版本。

集成部分已被删除：github.com/twitter/typeahead.js/commit/…此处的一些说明：aureliomerenda.com/…

这里的方法：aureliomerenda.com/… 不再有效

【参考方案2】：

现在最终的 Bootstrap 3.0.0 已经发布，typeahead 已经正式删除。但是，可以使用 Twitter 的 Typeahead (https://github.com/twitter/typeahead.js) 代替它：

Bootstrap 3 Typeahead 示例：http://bootply.com/86571

【讨论】：

github链接返回404

这是迄今为止这个问题的最佳答案。我试了一下，效果很好。

【参考方案3】：

正如 ceejayoz 所说，您需要 typeahead.js + 额外的 CSS 以与 Bootstrap 集成。

这是为 Bootstrap 2 制作的。

如果您希望它与 Bootstrap 3 一起使用，您必须更改 .tt-hint 类。我把它改成了display: none;，因为它覆盖得非常糟糕。

我还注意到按钮插件（输入）不能很好地工作，因为输入也没有被正确覆盖。

【讨论】：

这篇文章很有帮助。 .tt-hint 是奇怪的弹出窗口，其中包含来自输​​入控件的重复文本。不知道那里有什么。设置 display:none 真的有帮助。谢谢

【参考方案4】：

我找到了改编 [2014 年 5 月] ;)

对于像我一样从谷歌登陆这里的其他人，仍在寻找正确的答案： https://github.com/bassjobsen/Bootstrap-3-Typeahead

如果您需要像我一样使用淘汰赛 3，我对天才 Niemeyer (https://***.com/a/20503173/1218136) 的代码进行了最低限度的修改以再次工作：

<input type="text" data-bind="value: value, typeahead: source: your_array" />

【参考方案5】：

是的，在 Bootstrap 3 中不推荐使用预输入。

但是 typeahead.js 还没有为 Bootstrap 3 做好准备。

有效的解决方案是添加额外的 css，修复 css 问题： https://github.com/jharding/typeahead.js-bootstrap.css

【讨论】：

有效。我使用 tagManager、typeahead、bootstrap 3。另外使用来自 Nick P 答案的 .twitter-typeahead .tt-hint css 类 ***.com/questions/18059161/…