Meteor-typeahead: listing and selection

I have installed meteor-type-head via npm. I also installed

meteor add sergeyt:typeahead



I am trying to run an example datasource attribute so that I can display a list of countries when the user starts typing. I entered all countries into the collection: -

Country = new Meteor.Collection('country');


The collection is published and signed.

When I type in the input field, no suggestions appear. Does it have something to do with API activation? if so how do i do it? Please refer to the website

My form looks like this:

<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
        <input class="form-control typeahead" name="country" type="text" placeholder="Country" autocomplete="off" spellcheck="off" data-source="country"/>
        <input  type="submit" value="post">



country: function(){
    return Country.find().fetch().map(function(it){ return; });
} });



source to share

2 answers

To make your input complete, you need:

  • Activate jQuery ahead plugin using package API

    • Calling Meteor.typeahead in a template handler handler.
    • Call Meteor.typeahead.inject to activate the typeahead plugin for elements matching the CSS selector available on the page (see demo app ).
  • Write a "data source" function in your template that the typeahead plugin understands. Your data source function seems to be correct.

  • Add CSS styles for input / output (s) for your application. See an example here in the demo app.



Try in a template:

    <input type="text" name="country" data-source="country"
    data-template="country" data-value-key="name" data-select="selected">


Create a template like country.html (e.g. / client / templates / country.html) that contains:

<template name="country">


In your client javascript:

Template.createpost.rendered = function() {



    country: function() {
    return Country.find().fetch().map(function(it){
            return {name:};
    selected: function(event, suggestion, datasetName) {
        console.log(suggestion); //or anything what you want after selection




All Articles