bootstrap typeahead标签输入JSON数据

时间:2014-02-27 13:47:50

标签: javascript json typeahead.js

将我的工作解决方案移植到我的流星应用程序时,我遇到了障碍。

typeahead和tags输入插件在我的本地PC上工作正常,但当我将它移植到meteor.js时,它会以某种方式打破它。我添加了与小提琴相同的所有内容

http://jsfiddle.net/chou_one/Xss96/4/

(您可以查看通过Dropbox附加的资源)

所有JS代码都包含在我的渲染函数

var elt = $('.tags-typeahead');

elt.tagsinput();
elt.tagsinput('input').typeahead({
  prefetch: '/assets/tags.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {  
    this.tagsinput('add', datum.value);
    this.tagsinput('input').typeahead('setQuery', '');
}, elt));

tags.json存储在client / assets / tags.json

当我加载它时,我的控制台上出现以下错误

Exception from Deps afterFlush function: Error: one of local, prefetch, or remote is required
    at Function.jQuery.extend.error (http://192.168.0.11:3000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:281:9)
    at new Dataset (http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:382:19)
    at http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:1085:67
    at Object.jQuery.extend.map (http://192.168.0.11:3000/packages/jquery.js?265926494aaa3929cd2e30da265211c5929f37a4:544:13)
    at methods.initialize (http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:1084:34)
    at jQuery.fn.typeahead (http://192.168.0.11:3000/client/assets/js/typeahead.js?64e2027d5c9f1fbb2811d733c4555379271f54a5:1135:43)

需要注意的是,这仅适用于预先版本0.9.3。如果我使用最新版本,它就会停止工作! bootstrap-3 typeahead版本似乎也不起作用。 jQuery版本是1.11.0

我很确定这是meteor配置的一些问题,因为复制的所有文件和代码都与工作副本相同。我的meteor版本是0.70 template-engine-preview-release-10.1(如果这有助于进一步的?)

**

更新

**

我使用的插件与新的typeahead版本不兼容。所以我设法查看了tokenfield插件。编辑 - 标题也改变了 这适用于新的先行者,所以它实现了我想要的。现在,我需要一些关于如何在Bloodhound引擎中正确加载JSON对象的指导(尝试多次,但没有运气,我的JSON有效)它没有给出任何自动建议
3.如果这在我的独立环境中有效,我相信它可以在流星应用程序中使用

var engine = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.taglist); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: { url: 'tag.json'}
//remote: 'tag.json'    
});
engine.initialize();

$('#tokenfield-typeahead').tokenfield({
typeahead: {
source: engine.ttAdapter()
}
});

我的JSON

{
    "taglist": [
        "Birthday & Special Events",
        "Portrait & Family",
        "Fashion",
        "Product"
    ]
}

我的小提琴已更新http://jsfiddle.net/chou_one/Xss96/7/

2 个答案:

答案 0 :(得分:1)

确保你没有重新发明轮子。 Meteor有几个typeahead / autocomplete个包。他们本地与收藏品一起工作。

答案 1 :(得分:0)

通过使用另一个插件令牌字段并添加一些自定义jquery代码来实现此功能。可以关闭