twitter-bootstrap-3 - bootstrap-tagsinput with typeahead, bootstrap-3

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

在我的一个项目中,我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3.2。最近我都更新了(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 方法。 typeahead from 'source' 没有在 0.9 中实现,所以降级似乎不是一个选项。我不确定是否用 typeahead['val'] 替换它(虽然,两者都没有解决我看到的问题)。
至于 CSS,我从 bootstrap-tagsinput 文档页面复制了它——不确定这是不是这个意图(我是一个新手,所以我不知道更好)。

问题是,在把所有东西放在一起之后,我遇到了错误的行为(正如预期的那样)。具体来说,我面临一个问题,在插入标签后(输入一个词并按 Enter):
(1) tt-dropdown-menu 应该消失,但它没有。它与之前的 tt-suggestions 列表保持一致

(2) tt-hint 字段应该被清除但不是

提到如果我使用箭头选择 tt-suggestions 之一,则不会发生此问题可能会很有用

任何人都知道什么是恢复tagsinput-w/typeahead功能的最佳方法?

最佳答案

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

你可以用这个提前输入 与 twitter bootstrap 3 兼容

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/

关于twitter-bootstrap-3 - bootstrap-tagsinput with typeahead, bootstrap-3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21640772/

相关文章:

html - 如何在右侧制作带有标题的 Bootstrap 轮播?

html - Bootstrap 3.0.3 词缀 - 内容不在固定位置并移动到其他内容之上

javascript - 预输入回调不起作用

javascript - TypeAhead.js 突出显示 TypeError

php - 为什么我的 typeahead 结果中出现 undefined?

html - 在 Bootstrap 3 Nav 中对齐元素时遇到困难

css - 我怎样才能让一个div跨越我的屏幕的整个宽度

javascript - dom 加载 jquery 后触发事件

AngularJS 使用 Protractor 提前输入