Question

我的小提琴是here。

我正在the Fiddle here基于this answer扩展示例以使用Bloodhound。

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

echo 28 > /sys/class/gpio/export
echo 27 > /sys/class/gpio/export
echo 204 > /sys/class/gpio/export
echo 205 > /sys/class/gpio/export
echo 236 > /sys/class/gpio/export
echo 237 > /sys/class/gpio/export
echo 14 > /sys/class/gpio/export
echo 165 > /sys/class/gpio/export
echo 212 > /sys/class/gpio/export
echo 213 > /sys/class/gpio/export
echo 214 > /sys/class/gpio/export
echo low > /sys/class/gpio/gpio214/direction
echo low > /sys/class/gpio/gpio204/direction
echo low > /sys/class/gpio/gpio205/direction
echo in > /sys/class/gpio/gpio14/direction
echo in > /sys/class/gpio/gpio165/direction
echo low > /sys/class/gpio/gpio236/direction
echo low > /sys/class/gpio/gpio237/direction
echo in > /sys/class/gpio/gpio212/direction
echo in > /sys/class/gpio/gpio213/direction
echo mode1 > /sys/kernel/debug/gpio_debug/gpio28/current_pinmux
echo mode1 > /sys/kernel/debug/gpio_debug/gpio27/current_pinmux
echo high > /sys/class/gpio/gpio214/direction

这是基于示例here。

我修改了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文件中收到Uncaught TypeError: sync is not a function。

我希望根据bloodhound.js填充文本框。因此，如果我输入 Amsterdam 和 Washington ，我应该看到cities.json。

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

Answer 1

您的第一个问题是简单的CSS修复。以下css将使您的文本框与父元素宽度匹配。如果您更喜欢固定宽度而不是设置固定值

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

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

第二个问题出现在一些错误配置中。您错过了设置tagsinput插件的属性itemValue和itemText。我还添加了一个填充所选城市的方法。如果您不需要此功能，请删除方法populateValues()。

很明显，有一些空间可以改善这种实施方式，但这可以很容易地由你自己完成，对吗？

编辑：使用承诺进一步调试后，似乎可以解决评论中提到的OP问题。

您可以在此处找到一个有效的示例：http://jsfiddle.net/21fbf1L8/3/

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

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

1 个答案: