How to replace template data with Searched filter content using helpers


#1

hi guys,
I am trying to display a result set to a helper function but i don’t know how to do that. I am trying to create a search bar based result on main screen. I am using helper {{#each helper1}} to display set of data . If the helper1 is displaying 10 results. and i want to add a search that can filter this helper1 data on basis of string that is entered. This search field is out side helper1 loop. I am searching and i am again using same queries i used in helper1(is there a feasible method to do this without need to hit db again with same queries ). Now i have no idea how should i bind data to the same div where helper 1 was displaying it.

my collection name is user_details

<template name="t1" >

<input type="text" id="search_text">
<button id="submit_search" > Search</button>
{{# each helper1}}
<p> name : {{ name }} </p>
<p>    age : {{ age }}</p>
{{/each}}
</template>
Template.t1.helpers({
	helper1(){
	   var result = user_details.find({}).fetch();
       return result;
	}
});
Template.t1.events({
    'click #submit_search': function(){
     var con1 = $('#search_text').val();
     var result = user_details.find({name:{$regex:new RegExp('^' + con1)}}).fetch();
     //now i dont know what to do with this
   }	
});

#2

I think i would use a session object as documented in https://docs.meteor.com/api/session.html#Session-set
by doing so you could set the session object within your ‘click #submit_search’: function() to the inserted search criteria and also use this object within your user_details.find({}).fetch() query.

Template.t1.events({
‘click #submit_search’: function(){
Session.set(‘currentSearchString’, searchstring);

Please note that the Session object is a global object. Another option is the use of ‘meteor add reactive-var’ package. Here you will find a good summary of the usage of the session and the reactivevar object: https://blog.meteor.com/the-meteor-chef-reactive-dict-reactive-vars-and-session-variables-971584515a27


#3

why do u think …sessions could help me i want to replace the hlper data that is generating with db query with the search result data. i dont think sessions could help me in this.


#4

why not? did you check the referenced links?


#5

yes i did the checking part. those links are teaching about creating session but i dont know how is creating session usefull in this case how am i going to use it in my case.?


#6
Template.t1.helpers({
	helper1(){
	   var result = user_details.find({}).fetch();
       return result;
	}
});
Template.t1.events({
    'click #submit_search': function(){
     var con1 = $('#search_text').val();
     var result = user_details.find({name:{$regex:new RegExp('^' + con1)}}).fetch();
     //now i dont know what to do with this
   }	
});

As highlighted above: you set the value of the Session within the function of your click #submit_search event. Each time someone clicks the corresponding button the value of the Session will be changed to the corresponding value. The value of the Session you can use in your helpers function - as it is a string value. So eventually you will only have one user_details.find({query}).fetch() operation.


#7

I think I understand your question, and @foxinthebox103 has got the right idea, but I would definitely not use Session variables - they have their uses (in the sense of global state), but this isn’t one of them. So, what you need to do is save the search term in a template ReactiveVar and use that in your helper. Something like this:

Template.t1.onCreated(function t1OnCreated() {
  this.search = new ReactiveVar('put default search term here');
});

Template.t1.helpers({
  helper1() {
    const t = Template.instance();
    const query = new RegExp('^' + t.search.get())
    return user_details.find({ name: { $regex: query } });
  }
});

Template.t1.events({
    'click #submit_search'(e, t) {
     t.search.set($('#search_text').val());
   }	
});

How this works: initially, the helper uses the default search term you specified. As soon as you change the ReactiveVar in your event handler, the helper re-runs with the new value.

You’ll need to meteor add reactive-var to your project, if you haven’t already.

Note also that it is potentially dangerous to allow uncontrolled query strings to be entered, so you must ensure these are properly sanitised before the query is made.


#8

just want to, again, relink to https://blog.meteor.com/the-meteor-chef-reactive-dict-reactive-vars-and-session-variables-971584515a27
from my perspective a perfect summary


#9

Thanks @foxinthebox103 and @robfallows for your attention and support. For me @robfallows’s answer was a bit explanatory and helped me to solve my issue. After going through what he said, I came to know @foxinthebox103 was also referring to same thing, but @robfallows explained it in good way. Once again, thanks to both of you for your kind support.