First the publication on the server is changed to receive a filter term and use it in a $regex query for mongo:
FindFromPublication.publish('ingredients', (limit, filter) => { var options = { sort: { name: 1 }, limit: limit }; var query = { name: { $regex: filter, $options: 'i' } } return Ingredients.find(query, options); });
Then, in the client a new reactive-var is created to execute the subscription whenever the filter changes:
Template.ingredientsListPart.onCreated(function() { // redacted for readability var template = this; template.autorun(function() { var limit = template.limit.get(); var query = template.query.get(); template.subscribe('ingredients', limit, query); }); });
Lastly, there is a new textbox on the view markup and an event is hooked up to change the reactive-var as the user types (with debounce):
Template.ingredientsListPart.events({ 'keyup .ingredient-search': _.debounce(function(event, template) { template.query.set(event.target.value); template.limit.set(5); }, 300) });
That's all it takes, the list can now grow to have many ingredients and the user can search and page the list. You can follow the code by using this tag or view the live demo.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.