Meteor-typeahead: listing and selection
I have installed meteor-type-head via npm. https://www.npmjs.org/package/meteor-typeahead I also installed
meteor add sergeyt:typeahead
from https://atmospherejs.com/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 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; });
} });
source to share
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.
source to share
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">
<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
}
})
source to share