stmarks test

filter lines with regex

by phsiao2000

HTML

<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
<script src="http://fb.me/react-with-addons-0.5.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */
/* stmarks test */
var AutoComplete = React.createClass({
  getInitialState: function() {
    return {filter: ''};
  },
  onChange: function(e) {
    this.setState({filter: e.target.value});
  },
  updateFilteredItems: function() {
    this.setState({filteredItems: newFilteredItems});
  },
  render: function() {
    var re;
    try {
        re = new RegExp(this.state.filter, "g");
    } catch (e) {
        // Regex compilation failed; use this pattern which doesn't match anything
        re = /\B\b/;
    }
    var filteredItems = this.props.suggestionItems.filter(function(candidate) {
      return candidate.match(re) !== null;
    });
    var suggestionListItems = filteredItems.map(function(itm){
      return (
        <li>{itm}</li>
      );
    }, this);
    return (
      <div>
        <input onChange={this.onChange} value={this.state.filter} />
        <ul id="suggestion-list">
          {suggestionListItems}
        </ul>
      </div>
    );
  }
});

React.renderComponent(<AutoComplete suggestionItems={["cathedral-life",
"senior high",
"outreach",
"staff",
"clergy",
"pastoral care",
"serve-liturgy",
"christmas",
"special services",
"about",
"transition",
"cathedral-choir",
"choir",
"music",
"organ",
"carillon hymns",
"choral evensong",
"baptism",
"sacraments",
"confirmation",
"weddings",
"funerals",
"visit",
"healing station",
"pastoral care team",
"acolyte",
"eucharistic-minister",
"verger",
"children",
"nursery",
"visiting-with-children",
"childrens-chapel",
"worship",
"location",
"history",
"membership",
"our-beliefs",
"directions",
"parking",
"accessability",
"what-to-expect",
"council",
"people",
"vestry",
"books",
"sunday-school",
"resources",
"godly-play",
"childrens-education",
"jr-high",
"sr-high",
"adult-education",
"music-series",
"stewardship",
"serve-welcoming",
"serve-childrens-education",
"news",
"download",
"transition-committee",
"cathedral-choristers",
"shared-ministry-team",
"help","cathedral-life",
"senior...