get reactive data.

[chasemb]

Package does not return reactive data. I've forked your example app, searched for a particular package, edited the 'packageName' in mongo. The data in the app will not update until I re-query the search.

Please advise.

[SarahTan]

+1 to this issue.

The readme says "You can get the reactive data source with the PackageSearch.getData api" but when I use that, the data on the client side doesn't automatically reflect my updated documents.

[kyooriouskoala]

+1

[petermikitsh]

I'm getting reactive data with this package. Make sure your event handler is properly configured so your search works. For me, it was as simple as changing change input to keyup input.

[JulianKingman]

I'm having the same issue, it's not updating when it's changed. If I search for the document, it shows me the updated name, however if I press escape or backspace, it shows me the name it used to be.

[lauriiii]

+1

Has anyone figured out any workaround for this?

[ZedZhang]

+1

[markshust]

same solution as @petermikitsh. once changed from onChange to onKeyUp, all is reactive now. this is a non-issue.

[markshust]

i had fun getting this to work in react. while it was very simple, it was tough to figure out as im still new to reactive programming. hope this helps someone:

  getInitialState() {
    return {
      name: "",
      items: []
    };
  },
  handleChange(e) {
    var name = e.target.value;

    this.setState({name: name});

    if (name.length >=3) ItemSearch.search(name);
  },
  handleKeyUp() {
    this.setState({items: ItemSearch.getData()});
  },

[markshust]

ok -- this seems to only work locally, but not with any latency involved. actually, if you watch state and add a record to the database, getData is NOT reactive. perhaps this can help simulate the root of the issue.

[markshust]

This is in fact a non-issue. I was not setup to listen to reactive data sources in React. Here is the correct config if anyone wants to see it:

...
  mixins: [ReactMeteorData],
  getMeteorData() {
    return {
      items: ItemSearch.getData()
    };
  },
  getInitialState() {
    return {
      name: ""
    }
  },
  handleChange(e) {
    var name = e.target.value;

    if (name.length >= 3) ItemSearch.search(name);

    this.setState({name: name});
  },
...

Then you listen to this.data.items instead of this.state.items.

[achirkof]

+1
Data not really reactive or I use this package wrong.
I have a search result after page loaded and if add item in database it will not appear on the page. If use search field and type item name - it appear on the page.
For trigger search active I use keyup event.
Below are parts of my code.
template.js

Template.tpl.onRendered(function() {
    ExercisesSearch.search(' ');
});

Template.tpl.events({
    'keyup #searchExercises': _.throttle(function(event) { 
         var text = $(event.target).val().trim();
         ExercisesSearch.search(text);
     }, 200)
});

search.js server

SearchSource.defineSource('exercises', function(searchText, options) {
     //var options = {sort: {isoScore: -1}, limit: 20};

     if(searchText) {
         var regExp = buildRegExp(searchText);
         //var selector = {exerciseName: regExp, createdBy: Meteor.userId(), isDeleted: false};
         var selector = {
             exerciseName: regExp,
             $or: [{
                 createdBy: Meteor.userId(),
                 isPrivate: true
             }, {
                 isPrivate: false
             }],
             $and: [{
                  isDeleted: false
             }]};     
             return Exercises.find(selector, {sort: {isoScore: -1}, limit: 20}).fetch();
     } else {
         return Exercises.find({
             $or: [{  
                 createdBy: Meteor.userId(),
                 isPrivate: true
             }, {
                 isPrivate: false
             }],
             $and: [{
                 isDeleted: false
             }]
         }).fetch();
     }
 });

search.js client

var options = {   
     keepHistory: 1000 * 60 * 5,
     localSearch: true
 };                
 var exerciseFields = ['exerciseName'];
 ExercisesSearch = new SearchSource('exercises', exerciseFields, options);

page.html

<div class="row">
    <div class="col-lg-12">
        <div class="hpanel">
            <div class="panel-body">
                <div class="input-group">
                    <input class="form-control" id="searchExercises" type="text" placeholder="Search..">
                </div>
            </div>
        </div>
    </div>
</div>

...

{{#each exercisesList}}
    <div class="row">
        <div class="col-sm-12">
            <div class="hpanel filter-item">
                <div class="panel-body" name="exercise" id="{{_id}}">
                    <a href="{{pathFor 'exercise'}}"><h4 class="m-b-xs">{{exerciseName}}</h4></a>
                    <div class="container-fluid">
                        <p class="small">{{{substrVar exerciseDesc "500"}}}</p>
                    </div><br>
                </div>
            </div>
        </div>
    </div>
{{/each}}

tpl_helper.js

Template.tpl.helpers({
exercisesList: function() {
         return ExercisesSearch.getData({                    
             transform: function(matchText, regExp) {    
                 return matchText;                   
             },
             sort: {isoScore: -1}                    
         });
     }
});

I can repeat search query in browser console and "hidden" on the page item present in result.

[justjoolz]

Having the same issue here also, updating values on an entry to the db are not reactively rendered

[pauljohncleary]

+1

[urco]

+1

[ackzell]

"Having the same issue here also, updating values on an entry to the db are not reactively rendered"

I am experiencing the same as you.