CODEWITHSUNDEEP
javascriptjsontypeahead.js
Chou One
Chou One

Reputation: 627

bootstrap typeahead tags input with JSON data

I have kinda hit a roadblock when porting my working solution onto my meteor app.

The typeahead and tags input plugin works fine on my local PC but when I port it to meteor.js it breaks it somehow. I have added all the things that are identical to the fiddle

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

(you can view the resources attached via dropbox)

All the JS code is wrapped inside my rendered function

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 is stored inside client/assets/tags.json

When I load it up I get the following errors on my console

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)

a thing to note is that this only works with typeahead version 0.9.3. If I use the latest one it just stops working! The bootstrap-3 typeahead version also does not seem to work as well. jQuery version is 1.11.0

I am pretty sure it's some issue with the meteor config as all the files and code copied over is identical to the working copy. My meteor version is 0.70 template-engine-preview-release-10.1 (if that helps any further?)

**

UPDATE

**

The plugins I am using are not compatible with the new typeahead version. So I managed to look at tokenfield plugin. EDIT - Title also changed
2. This works well with the new typeahead so it achieves what I want. Now, I need some guidance on how to load the JSON object properly in the Bloodhound engine (tried multiple times but no luck and my JSON is valid) it does not give any autosuggestions
3. if this works on my standalone environment I'm quite confident it will work with within the meteor app 

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()
}
});

My JSON

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

my fiddle is updated http://jsfiddle.net/chou_one/Xss96/7/

Upvotes: 0

Views: 3479

Answers (2)

Chou One
Chou One

Reputation: 627

Got this to work by using another plugin tokenfield and adding some custom jquery code. Can be closed

Upvotes: 0

Dan Dascalescu
Dan Dascalescu

Reputation: 151926

Make sure you're not reinventing the wheel. Meteor has several typeahead / autocomplete packages. They work natively with collections.

Upvotes: 1

Related Questions