Meteor - Simple Search Issues

Question

So I'm trying to do a live search of some client-side info in Meteor.

I have

Template.userTable.events({
    "change #nameSearchBar":function(event){
        //console.log(event);
        searchText = event.target.value;
        filteredUsers = Meteor.users.find({"profile.name":{$regex: (".*"+searchText+".*") } });
        console.log(filteredUsers.fetch());
    }
});

In my js, and

Template.userTable.helpers({
        usersOnline: function() {
            return filteredUsers;
        }
});

As well. I can see that filteredUsers is updated in the console logs, but I don't get the nice live-update of the html that lists usersOnline - instead I just get all of them, which is what the usersOnline was initialised to, by calling filteredUsers = Meteor.users.find().

How can I get the desired live-update?

Answer 1

Your filteredUsers variable is not reactive, so when it changes, nothing is telling the usersOnline helper to re-run. I think you can do this in one of two ways:

1. Use a ReactiveVar . I'm admittedly not very experienced with them, but I think you could assign the ReactiveVar to be part of the Template, and then have it watch that -- something like:

    Template.userTable.created = function() { this.data.filteredUsers = new ReactiveVar(...) // initialize this to whatever } Template.userTable.helpers({ usersOnline: function() { return this.filteredUsers.get(); // pulling from the reactive var rather than a static var } }); Template.userTable.events({ "change #nameSearchBar":function(event){ searchText = event.target.value; // Setting the reactive var should invalidate the "get" in the helper and trigger re-run filteredUsers.set(Meteor.users.find({"profile.name":{$regex: (".*"+searchText+".*") } })); } }); 

2. Use a Session variable -- very similar, but it's accessible globally instead of set on that Template. All Session variables are reactive by default:

    Template.userTable.created = function() { Session.setDefault('filteredUsers', ...) // initialize this to whatever } Template.userTable.destroyed = function() { Session.set('filteredUsers', null); // clean up after yourself when you navigate away } Template.userTable.helpers({ usersOnline: function() { return Session.get('filteredUsers'); // pulling from Session var, which is reactive } }); Template.userTable.events({ "change #nameSearchBar":function(event){ searchText = event.target.value; // Setting the Session var should invalidate the "get" in the helper and trigger re-run Session.set('filteredUsers', Meteor.users.find({"profile.name":{$regex: (".*"+searchText+".*") } })); } }); 

Like I said, I haven't done a lot with ReactiveVars, but I think #1 is technically the better way to go, so I'd play around with that first.

Answer 2

You can also define the searchtext in a Session variable and when that variable changes, display the new result.

Something like this:

Session.setDefault('searchText', null);

Template.userTable.events({
   "change #nameSearchBar":function(event){;
       searchText = event.target.value;
       Session.set('searchText', searchText);
   } 
});

Template.userTable.helpers({
    usersOnline: function() {
        if(Session.get('searchText') == null){
            return Meteor.users.find();
        } else {
             var searchText = Session.get('searchText');
             return Meteor.users.find({"profile.name":{$regex: (".*"+searchText+".*") } });
        }
    }
});