Autocomplete package for meteor powered by twitter typeahead.js

License: MIT

Language: JavaScript

meteor-typeahead Build Status LICENSE meteor package version

Deps Status DevDeps Status

Twitter's typeahead.js autocomplete package, wrapped for Meteor 1.0+. Issue command meteor add sergeyt:typeahead to install the package.

Initializing typeahead

When the DOM is loaded through Meteor.startup on each template

Meteor.startup(function() {

with iron:router

Using iron:router the Meteor.startup is already triggered because it loads the template or the loading template and then inject the data. It must be delayed to when iron:router knows it is rendered completely.

Template.demo.rendered = function() {


See demo application in this repository to find more examples.

data-source attribute

<input class="form-control typeahead" name="team" type="text"
       placeholder="NBA teams"
       autocomplete="off" spellcheck="off"
Nba = new Meteor.Collection("nba");

if (Meteor.isServer){
	Nba.insert({name:'Boston Celtics'});
	// fill Nba collection

  nba: function() {
    return Nba.find().fetch().map(function(it){ return; });

Multiple datasets

<template name="demo">
  <div class="form-group">
    <input class="form-control typeahead" name="team" type="text"
           placeholder="NBA and NHL teams"
           autocomplete="off" spellcheck="off"

<template name="team">
  teams: function() {
    return [
        name: 'nba-teams',
        valueKey: 'name',
        local: function() { return Nba.find().fetch(); },
        header: '<h3 class="league-name">NBA Teams</h3>',
        template: 'team'
        name: 'nhl-teams',
        valueKey: 'name',
        local: function() { return Nhl.find().fetch(); },
        header: '<h3 class="league-name">NHL Teams</h3>',
        template: 'team'

Custom template to render suggestion

<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>
Repos = new Meteor.Collection("repos");

if (Meteor.isServer){
		// fill repos from private repos.json asset

if (Meteor.isClient){
    repos: function() {
      // this only works if returned objects have
      // an attribute named "value" containing the text
      // See docs for "data-value-key" attribute
      return Repos.find().fetch();

Server side search

<input class="form-control typeahead" name="search" type="text" placeholder="Type to query"
       autocomplete="off" spellcheck="off"
BigCollection = new Meteor.Collection('bigcollection');

if (Meteor.isServer) {
	Meteor.startup(function() {
		if (!BigCollection.find().count()) {
			// fill BigCollection

		search: function(query, options) {
			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 {

    search = function(query, sync, callback) {'search', query, {}, function(err, res) {
        if (err) {
        callback({ return {value:}; }));

Catching selected event with id

Template.example.rendered = function() {

  items: function() {
    // data source function
    // TODO fetch items from meteor collection
    return someCollections.find().fetch().map(function(object){ return {id: object._id, value: object.value}; });
  selected: function(event, suggestion, datasetName) {
    // event - the jQuery event object
    // suggestion - the suggestion object
    // datasetName - the name of the dataset the suggestion belongs to
    // TODO your event handler here


<template name="example">
  <input placeholder="Kies een plaats" autocomplete="off" spellcheck="off"
      data-source="items" data-select="selected"/>


By default, there is no style applied with this package. If you want the same styling as in the demo app, please do the following:

  • add bootstrap: meteor add twbs:bootstrap
  • add the style.css file to your application

Project Statistics

Sourcerank 7
Repository Size 289 KB
Stars 149
Forks 83
Watchers 7
Open issues 41
Dependencies 130
Contributors 29
Tags 39
Last updated
Last pushed

Top Contributors See all

Sergey Todyshev Raphael Araújo Benjamin Berman Kristijan Husak Sudhanshu Pierre Ozoux Ben M Greene Eli Doran Jess Latimer Omer Azoulay Yariv Gilad Patrice Gauthier Timo Brinkmann cinjon Zhenya David Pankros Ayoub Hidri Laran Evans Kent Shikama Volodymyr Kachurovskyi

Packages Referencing this Repo

Autocomplete package for meteor powered by twitter typeahead.js
Latest release 0.11.1_9 - Updated - 149 stars
Autocomplete package for meteor powered by twitter typeahead.js
Latest release 1.2.0 - Updated - 149 stars

Recent Tags See all

v1.2.0 May 29, 2018
v0.11.1_9 June 11, 2016
v0.11.1_8 January 15, 2016
v0.11.1_7 December 29, 2015
v0.11.1_6 October 20, 2015
v0.11.1_5 October 02, 2015
v0.11.1_4 September 04, 2015
v0.11.1_3 July 05, 2015
v0.11.1_2 July 05, 2015
v0.11.1_1 May 31, 2015
v0.11.1 May 15, 2015
v0.10.5_14 March 28, 2015
v0.10.5_13 March 18, 2015
v0.10.5_12 February 07, 2015
v0.10.5_11 February 07, 2015

Interesting Forks See all

Autocomplete package for meteor powered by twitter typeahead.js
JavaScript - MIT - Last pushed - 1 stars - 1 forks

Something wrong with this page? Make a suggestion

Last synced: 2018-05-29 02:48:51 UTC

Login to resync this repository