我的 fiddle 是 here .
我正在扩展 the Fiddle here 中的示例基于 this answer与 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 .
我修改了
typeahead
在 tagsinput()
内获取和使用 text
和适当的值字段。我有以下问题:
Uncaught TypeError: sync is not a function
来自 bloodhound.js
文件。 我希望根据
cities.json
填充文本框.因此,如果我进入阿姆斯特丹和华盛顿,我应该会看到 $("#myBox").val() = "1,4"
.我想我可能错误地混合了不同版本的预先输入,但我尝试了几种 JS 文件的组合,但没有任何运气。
最佳答案
您的第一个问题是一个简单的 css 修复。以下 css 将使您的文本框与父元素宽度匹配。如果您更喜欢固定宽度,只需设置一个固定值
/* match parent element width */
.bootstrap-tagsinput {
width: 100%;
}
/* alternatively set a fixed width */
.bootstrap-tagsinput {
width: 320px;
}
第二个问题位于一些错误配置中。您错过了设置属性
itemValue
和 itemText
标签输入插件。我还添加了一种填充您选择的城市的方法。如果您不需要此功能,只需删除方法 populateValues()
.Surly 有一些改进这个实现的空间,但这可以由你自己轻松完成,对吧?
编辑:在使用 Promise 进行进一步调试后,似乎可以修复评论中提到的 OPs 问题。
您可以在这里找到一个工作示例:http://jsfiddle.net/21fbf1L8/3/
示例 repo :https://github.com/gearsdigital/so-questions-38493752-
关于twitter-bootstrap - 集成 bootstrap-tagsinput、boostrap3-typeahead 和 Bloodhound 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38493752/