meteor-typeahead

Autocomplete package for meteor powered by twitter typeahead.js

meteor-typeahead

Twitter's typeahead.js autocomplete package, wrapped for Meteor 0.9+.

Demo: http://typeahead.meteor.com/

/**
 * Activates typeahead behavior for given input DOM element.
 * @param element (required) The DOM element to infect.
 * @param source (optional) The custom data source.
 */
Meteor.typeahead(element, source);
 
/**
 * Activates all typeahead elements.
 * @param selector (optional) CSS selector to find typeahead elements to be activated.
 */
Meteor.typeahead.inject(selector);
<input class="form-control typeahead" name="team" type="text"
       placeholder="NBA teams"
       autocomplete="off" spellcheck="off"
       data-source="nba"/>
Nba = new Meteor.Collection("nba");
 
if (Meteor.isServer){
    Nba.insert({name:'Boston Celtics'});
    // fill Nba collection 
}
 
Template.demo.nba = function(){
    return Nba.find().fetch().map(function(it){ return it.name; });
};
<input class="form-control typeahead" name="team" type="text"
       placeholder="NBA and NHL teams"
       autocomplete="off" spellcheck="off"
       data-sets="teams"/>
Template.demo.teams = function(){
    return [
        {
            name: 'nba-teams',
            localfunction() { return Nba.find().fetch().map(function(it){ return it.name; }); },
            header: '<h3 class="league-name">NBA Teams</h3>'
        },
        {
            name: 'nhl-teams',
            localfunction() { return Nhl.find().fetch().map(function(it){ return it.name; }); },
            header: '<h3 class="league-name">NHL Teams</h3>'
        }
    ];
};
<input class="form-control typeahead" name="repo" type="text"
       placeholder="open source projects by Twitter"
       autocomplete="off" spellcheck="off"
       data-source="repos" data-template="repo"/>
 
<template name="repo">
       <p class="repo-language">{{language}}</p>
       <p class="repo-name">{{name}}</p>
       <p class="repo-description">{{description}}</p>
</template>
Repos = new Meteor.Collection("repos");
 
if (Meteor.isServer){
    Meteor.startup(function(){
        Repos.remove({});
        // fill repos from private repos.json asset 
        JSON.parse(Assets.getText('repos.json')).forEach(function(it){
            Repos.insert(it);
        });
    });
}
 
if (Meteor.isClient){
    Template.demo.repos = function(){
        return Repos.find().fetch();
    };
}
<input class="form-control typeahead" name="search" type="text" placeholder="Type to query"
       autocomplete="off" spellcheck="off"
       data-source="search"/>
BigCollection = new Meteor.Collection('bigcollection');
 
if (Meteor.isServer) {
    Meteor.startup(function() {
        if (!BigCollection.find().count()) {
            // fill BigCollection 
        }
    });
 
    Meteor.methods({
        searchfunction(queryoptions) {
            options = options || {};
 
            // guard against client-side DOS: hard limit to 50 
            if (options.limit) {
                options.limit = Math.min(50, Math.abs(options.limit));
            } else {
                options.limit = 50;
            }
 
            // TODO fix regexp to support multiple tokens 
            var regex = new RegExp("^" + query);
            return BigCollection.find({name: {$regex:  regex}}, options).fetch();
        }
    });
} else {
 
    Template.demo.search = function(querycallback) {
        Meteor.call('search', query, {}, function(errres) {
            if (err) {
                console.log(err);
                return;
            }
            callback(res.map(function(v){ return {value: v.name}; }));
        });
    };
}