score:1

Accepted answer

there are many ways to accomplish this, but the simplest (in my opinion) is to store your search criteria in the list component's state and use it to filter which items from your collection get displayed. you can use a backbone collection's built in filter method to do this.

var list = react.createclass ({

  mixins: [backbone.react.component.mixin],
  getinitialstate: function () {
    return {
      namefilter: ''
    };
  },
  updatesearch: function (event) {
    this.setstate({
      namefilter: event.target.value
    });
  },
  filteritems: function (item) {
    // if we have no filter, pass through
    if (!this.state.namefilter) return true;
    return item.name.tolowercase().indexof(this.state.namefilter) > -1;
  },
  render: function(){
    var list = this.props.collection
      .filter(this.filteritems.bind(this))
      .map(function(obj){
        return (
          <div key={obj.id}>
            <h2>{obj.name}</h2>
          </div>
        )
    });

    return (
      <div classname='list'>
      {list}
        <input onchange={this.updatesearch} type="text" value={this.state.namefilter}/>
      </div>
    )
  }
});

var collection = new backbone.collection([
  {
    name: 'bob'
  },
  {
    name: 'bill'
  },
  {
    name: 'james'
  }
]);

react.render(<list collection={collection}/>, document.body);

jsbin

the search criteria could easily be passed down from a parent component as a prop, so the search input does not have to live inside your list component.

score:0

eventually i also found a different solution (below), but it involves copying the entire collection into state, which is probably not such a good idea...

var list = react.createclass ({

    mixins: [backbone.react.component.mixin],

    searchfilter: function () {
        var updatedlist = this.state.init;
        var searchtext = this.refs.searchbar.getdomnode().value
        updatedlist = updatedlist.filter(function (item) {
            return  item.name.tolowercase().search(
                searchtext.tolowercase()) !== -1
        });
        this.setstate({items: updatedlist})
        }
    },

    getinitialstate: function () {
        initialstate = this.getcollection().map(function(model) {
            return { 
                    id: model.cid,
                    name: model.get('name'),
                    description: model.get('description')
                    }
        });
        return {
            init: initialstate,
            items : []
        }
    },

    componentwillmount: function () {
        this.setstate({items: this.state.init})
    },

    render: function(){
        var list = this.state.items.map(function(obj){
            return (
                    <div key={obj.id}>
                        <h2>{obj.name}</h2>
                        <p>{obj.description}</p>
                    </div>      
                )
        });
        return (
            <div classname='list'>
            <input ref='searchbar' type="text" placeholder="search" onchange={this.searchfilter}/>
            {list}
            </div>
        )
    }
}); 

Related Query

More Query from same tag