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

Question

我的小提琴在这里.

我在延长的例子这里的小提琴基于这个答案一起工作警犬.

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

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();

这基于此处的示例.

我已经修改了typeahead内部tagsinput()以text适当地获取和使用和值字段.

我有以下问题:

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

我想根据文本框填充cities.json.因此,如果我进入阿姆斯特丹和华盛顿,我应该看到$("#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;
}

第二个问题是由于某些配置错误造成的。itemValue您错过了设置itemTextTagsinput 插件的属性。我还添加了一种填充您选择的城市的方法。如果您不需要此功能，只需删除该方法即可populateValues()。

当然，这个实现还有一些改进的空间，但这可以很容易地由你自己完成，对吧？

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

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

示例仓库：https://github.com/gearsdigital/so-questions-38493752-