集成 bootstrap-tagsinput、boostrap3-typeahead 和 Bloodhound 的问题

Question

我的 fiddle 是 here。

我正在扩展 the Fiddle here based on this answer to work with Bloodhound 中的示例。

我正在使用以下代码段预取数据：

prefetch_url='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/cities.json';

var cities = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: prefetch_url,
    ttl:1
});

cities.initialize();

这是基于示例here。

我修改了 tagsinput() 中的 typeahead 以适当地获取和使用 text 和值字段。

我有以下问题：

文本框的大小不断变化。
如果我在文本框中输入，我会从 bloodhound.js 文件中收到一个 Uncaught TypeError: sync is not a function。

我希望根据 cities.json 填充文本框。因此，如果我输入 Amsterdam 和 Washington，我应该会看到 $("#myBox").val() = "1,4".

我想我可能错误地混合了不同版本的 typeahead，但我已经尝试了几种 JS 文件的组合，但都没有成功。

Answer 1

您的第一个问题是一个简单的 css 修复。以下 css 将使您的文本框与父元素宽度匹配。如果您更喜欢固定宽度，只需设置一个固定值

/* match parent element width */
.bootstrap-tagsinput {
  width: 100%;
}

/* alternatively set a fixed width */
.bootstrap-tagsinput {
  width: 320px;
}

第二个问题是配置错误。您错过了设置 tagsinput 插件的属性 itemValue 和 itemText。我还添加了一种方法来填充您选择的城市。如果您不需要此功能，只需删除方法 populateValues().

当然，这个实现还有一些改进的空间，但这可以自己轻松完成，对吗？

编辑： 使用 promise 进一步调试后似乎修复了评论中提到的 OP 问题。

您可以在这里找到一个工作示例：http://jsfiddle.net/21fbf1L8/3/

示例回购：https://github.com/gearsdigital/so-questions-38493752-

集成 bootstrap-tagsinput、boostrap3-typeahead 和 Bloodhound 的问题

Issues integrating bootstrap-tagsinput, boostrap3-typeahead and Bloodhound

twitter-bootstrap

bootstrap-typeahead

bloodhound

bootstrap-tags-input