5

我的小提琴在这里。

我根据这个答案扩展了 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();

这是基于此处的示例。

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

我有以下问题：

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

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

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

4

1 回答 1

2

您的第一个问题是一个简单的 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/

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

于 2016-07-31T21:17:12.803 回答