Pages

Sunday, May 8, 2016

Learning Meteor.js [Part 15]: Adding search to filter a collection

At first tried to use the easysearch package from atmosphere.js, but I could not get it to work (T_T). As it turns out, rolling out my own was not difficult.

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.