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

Question

我的小提琴在这里。

根据这个答案，我将Fiddle中的例子扩展到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();

这是基于这里的例子。

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

我有以下问题：

1. 文本框的大小不断变化
2. 如果我在文本框中键入，则会收到来自bloodhound.js文件的Uncaught TypeError: sync is not a function

我希望文本框基于cities.json进行填充。因此，如果我进入阿姆斯特丹和华盛顿，我应该会看到$("#myBox").val() = "1,4"。

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

Answer 1

您的第一个问题是一个简单的css修复。下面的css将使您的Textbox与父元素的宽度相匹配。如果你喜欢固定宽度，而只是设置一个固定值

/* 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-