CODEWITHSUNDEEP
meteor
Jóhann S. Ingason
Jóhann S. Ingason

Reputation: 69

How to Search and output from Meteor Collection

The JS

Colors = new Meteor.Collection("colors");

Template.col_list.cols = function () {
  return Colors.find();
};

So this code will output everything from Col.find into the handlebar cols in the html

The HTML

{{#each cols}}
{{name}}, {{RGB}}, {{HEX}}
{{/each}}

But say I want to have a input box so I can search for a name of the color, so it only shows the information for that color or any color that starts with whatever I type into the input box.

example: Input = "bl" output should be black, blue or whatever else that starts with bl.

I've been looking everywhere for any example of this in practice yet I haven't found any.

Far as I have gotten so far is something to this effect yet it yields no luck.

Template.col_list.events({
  'click .search': function() {
    Colors.find(name: $('col_name').val());
  }
});

Upvotes: 0

Views: 1941

Answers (1)

Christian Fritz
Christian Fritz

Reputation: 21354

You need to make the content of the template depend on the input field in a way that preserves the reactivity of Meteor. Session variables are great for that.

This should work:

Colors = new Meteor.Collection("colors");

Template.col_list.cols = function () {
  return Colors.find({name: { $regex: Session.get('prefix')+".*", $options: 'i' }});
};

Template.col_list.events({
  'click .search': function() {
    Session.set('prefix', $('.col_name').val());
  }
});

Upvotes: 5

Related Questions