CODEWITHSUNDEEP
node.jsmeteor
meteorBuzz
meteorBuzz

Reputation: 3200

meteor-typeahead: Listing and selecting

I have installed meteor-typeahead via npm. https://www.npmjs.org/package/meteor-typeahead I have also installed 

meteor add sergeyt:typeahead

from https://atmospherejs.com/sergeyt/typeahead

I am trying to get the data-source attribute example to function so I can display a list of countries when the user begins to type. I have inserted all countries into the collection :- 

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

The collection is published and subscribed.

When I type into the input field, no suggestions appear. Is it something to do with activating the API? if so how do I do this? Please reference the website https://www.npmjs.org/package/meteor-typeahead

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">
</form>
</template>

client.js

Template.createpost.helpers({
country: function(){
    return Country.find().fetch().map(function(it){ return it.name; });
} });

Upvotes: 3

Views: 1900

Answers (2)

user1377371
user1377371

Reputation:

Try this way in your template:

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

Create template like country.html (for example /client/templates/country.html) which contains:

<template name="country">
    <p>{{name}}</p>
</template>

In your client javascript:

Template.createpost.rendered = function() {
    Meteor.typeahead.inject();
}

and

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

Upvotes: 0

sergeyt
sergeyt

Reputation: 187

In order to make your input to have typeahead completion you need:

  1. Activate typeahead jQuery plugin using package API

    • Meteor.typeahead call in template rendered event handler.
    • Meteor.typeahead.inject call to activate typeahead plugin for elementes matched by CSS selector available on the page (see demo app).

  2. Write 'data-source' function in your template understandable by typeahead plugin. It seems your 'data-source' function is correct.

  3. Add CSS styles for typeahead input(s)/dropdown to your application. See example here in demo app.

Upvotes: 1

Related Questions