Twitter bootstrap 集成bootstrap标记输入、boostrap3 typeahead和侦探犬的问题

我的小提琴是

我正在扩展基于的示例，以便使用

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

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

，以适当地获取和使用

文本和值字段

我有以下问题：

文本框的大小不断变化
如果我在文本框中键入，我会从
bloodhound.js
文件中收到一个
uncaughttypeerror:sync不是一个函数

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

我认为我可能错误地混合了typeahead的不同版本，但我尝试了几种JS文件的组合，但没有成功。
您的第一个问题是一个简单的css修复程序。以下css将使您的文本框与父元素宽度匹配。如果您更喜欢固定宽度，只需设置一个固定值即可

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

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

第二个问题在于一些错误的配置。您没有设置tagsinput插件的属性
itemValue
和
itemText
。我还添加了一个方法来填充您选择的城市。如果不需要此功能，只需删除方法
populateValues（）

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

编辑：在进一步调试后，使用promise似乎可以修复评论中提到的OPs问题

您可以在此处找到一个工作示例：

示例Repo:
如果我在Safari或Chrome上运行您的小提琴，则不会出现
未捕获的TypeError
。复制此问题的步骤是什么？你能解释一下你说的“文本框不断变化”是什么意思吗？您希望文本框的宽度固定吗？谢谢，@gearsdigital。是的，我希望它是一个固定的宽度。由于某种原因，我不再像你说的那样收到TypeError，但是文本框中没有填充城市。我没有收到任何关于Chrome、Safari或Firefox的typeahead建议。另外，我希望能够得到一个逗号分隔的ID列表（就像我的原始源代码一样），而不是实际的标记名作为返回值。你有没有试着写一个像阿姆斯特丹这样的城市名字？无论如何，我已经编辑了我的提琴以符合您的要求（以逗号分隔的ID列表）：真奇怪！你有错误吗？可能是您的系统或浏览器中的安全策略问题？OSX下的Firefox、Safari和Chrome都很好：让我们来吧。