CODEWITHSUNDEEP
javascriptmeteortypeahead.js
user592419
user592419

Reputation: 5233

Why is typeahead-js not working on Meteor but is working locally?

My setup using typeahead-js is below. It's working very well locally with no problems. However, when I deploy to meteor, it's no longer working in that the datums are the same but the typeahead is not happening.

On Meteor.client:

Template.searchProfiles.rendered = function() {
    $('input#query').typeahead({
        name:'searchProfiles',
        local:searchProfilesDatums(),
    });
}

var searchProfilesDatums = function() {
    var datums = [];
    Profiles.find().forEach(function(profile) {
        tokens = profile.name.split(" ");
        datums.push({value:profile.name, nameRoute:profile.nameRoute, tokens:tokens});
    });
    return datums;
}

Upvotes: 1

Views: 486

Answers (1)

nathan-m
nathan-m

Reputation: 8865

When you provide the "name" attribute to a typeahead datum - it caches the datum, and re-initialising any typeahead with another datum with the same name will re-use the datum - including local values.

If you're running remotely - the first datum may be initialised at a time when there's no data in the collection (eg waiting for the subscription), and subsequent datum's are ignored in favour of the cached one.

Possible solutions:

  • Remove the datum name, prevents typeahead caching it
  • Provide a unique name each time (bad idea, as they're all cached)
  • Use IronRouter, with a before/ready hook for the required data/subscription
  • Use a modified branch of typeahead that allows for computed callbacks (apparently coming in version 0.10)

I'm currently using a modified branch which allows for computed values, but I have some of my own twists on it.

Upvotes: 1

Related Questions