twitter-bootstrap – 集成bootstrap-tagsinput,boostrap3-typea

发布时间：2020-12-17 20:43:00 所属栏目：安全来源：网络整理

导读：我的小提琴是 here. 我将基于this answer在the Fiddle here中扩展该示例以使用Bloodhound. 我正在使用以下代码段预取数据： prefetch_url='https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/cities.json';var cities = new Blood

我的小提琴是 here.

我将基于this answer在the Fiddle here中扩展该示例以使用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.

我已经在tagsinput()中修改了typeahead,以适当地获取和使用text和value字段.

我有以下问题：

>文本框的大小不断变化.
>如果我输入文本框,我会收到一个Uncaught TypeError：sync不是bloodhound.js文件中的函数.

我希望基于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().

很明显,有一些空间可以改进这种实现,但这可以很容易地由你自己完成,对吧？

编辑：使用承诺进一步调试后似乎修复了评论中提到的OP问题.

你可以在这里找到一个有效的例子：http://jsfiddle.net/21fbf1L8/3/

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!