How to add search/filter to meteor (need to search with a conbination of diff fields)


#1

Hi,
I am having a hard time finding out how to implement a search functionality for my collections, I am looking for a search like : Color + Age that will show all the documents that match those 2 queries (or more, I will do about 10 quries)

I tried easy:search package but it won’t work (I think) for several queries filters together

any points on the right direction will really help
thanks


#2

Can you elaborate a bit?

Are you trying to give your user the ability to search for documents? Are you searching one collection at a time or many? Maybe post some sample code of what you have now?


#3

I don’t have any code now since was using the easy:search package but couldn’t get it to work how I wanted to I deleted.

What I am trying to do is search on one collection but based on several fields for example with field of colors and numbers …so I want to return or documents that have color red AND number 3 …easy:search helped me only search by numbers OR colors for example but not AND

thanks!


#4

So this is a stripped down version of a reactive filter I use in some apps. I used Session and jQuery to get the point across, but obviously your implementation will likely be different…

<template name="form">
    <form>
        <input id="color" type="text" placeholder="Color" />
        <input id="number" type="text" placeholder="Number" />
        <button type="submit">Submit</button>
    </form>
    <div>
        {{#each results}}
            Name: {{name}}
        {{/results}}
    </div>
</template>

Template.form.events({
    'submit': function(e,t){
        e.preventDefault();
        Session.set('colorFilter', $('#color').val());
        Session.set('numberFilter', $('#number').val());
    }
});

Template.form.helpers({
    results: function(){
        return Collection.find({
          color: Session.get('colorFilter'),
          number: Session.get('numberFilter')
        });
    }
});

#5

Thanks been plying with this tactic for the last hours and I think its a great solution:) , do you think I will have some kind of performance issues? I will publish first a 1000 document collection to the client and then they will filter using this tactic

thnx


#7

I think that depends on your publication strategy.

If your publication is small enough, then you could grab the whole thing and filter your helper as I’ve shown.

If you have a larger publication, you could use a solution like @shocker proposed, and build a pub/sub based on route params. That way you’d only be waiting for the exact results you need.


#9
Template.form.helpers({
    results: function(){
        return Collection.find({
          color: Session.get('colorFilter'),
          number: Session.get('numberFilter')
        });
    }
});

I ended up going with your solution after weeks of researching, but now I have a new problem, lets say I leave the color field empty, it means Session.get(“colorFiltre”) will get an empty value/variable…so the query of Collection.find will then return an error…do you know how to overcome that so basically if the Session.get is empty then it won’t search for that specific field?

Thanks!


#10

Yeah, so you will need to address your use cases, but something like:

if (Session.get('colorFilter') === '' || Session.get('colorFilter') === undefined) {
  return Collection.find({ 
    number: Session.get('numberFilter') 
  });
} 
else {
    return Collection.find({
      color: Session.get('colorFilter'),
      number: Session.get('numberFilter')
    });
}

#11

Appreciate your response, I have 15 filters/select elements, any way to achieve that with this technique? I think like that I would have to run every posibility which would be in the 1000s


#12

Hm, so to change up a process I used to build selectors for the aldeed:tabular package, maybe something like:

var selector = {};

if (colorFilter !== undefined) {
  selector.color = colorFilter;
}

if (numberFilter !== undefined) {
  selector.number = numberFilter;
}

return Collection.find(selector);

#13

Oh!! this is it :slight_smile: thanks! been looking for this (delayed from finishing that part of the app) for ages!

Thank you!


#14

Thank you for this post it was very helpful for me !