JSFiddle - React, Tailwind, and code Playground

by spicyj

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 */
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={['Dog','Cat','Fish','Catfish','Bird','Dingo']} />, document.body);