JSFiddle - React, Tailwind, and code Playground

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>
<div id="app"/>
<p>this.getFormDocs(this.state.forms[0]);</p>

CSS

#app {
    width: 500px;
}

#Select {
    width: 200px;
    float:left;
    background-color: pink;
    font-family: helvetica;
    font-size: 9px;
    line-height: 1.4em;
}
#Chosen {
    width: 300px;
    float: left;
    background-color: beige;
}

#BookmarkList {
    background-color: LightBlue;
}

#FormsList {
    background-color: LightGreen;
    font-size: 10px;
}

JavaScript 1.7

/** @jsx React.DOM */
/*react prismic*/
console.log("start");

var Chosen = React.createClass({
    getInitialState: function () {
        return {list: ['test']};
    },
    onChange: function(newList) {
        this.SetState = newList;
    },
    handleClick: function(ev) {
        console.log("clicked");
    },
    render: function () {
        console.log("chosen:", this.props.list);
        var listItems = this.props.list.map(function(itm){
            return  (
                <li onClick={this.handleClick}>{itm}</li>
            );
        }, this);
        return (  
        <div id="Chosen">
            <ul>My List
                {listItems}
            </ul>
        </div>
        );
    }
});

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);
    var allListItems  = this.props.suggestionItems.map(function(itm){
      return (
        <li>{itm}</li>
      );
    }, this);
    return (
        <div id="AutoComplete">
            <div id="Select">
            <input onChange={this.onChange} value={this.state.filter} />
            <ul id="suggestion-list">
              {allListItems}
            </ul>
            </div>
            <Chosen list={filteredItems} />
        </div>
    );
  }
});
var initialList = ["cathedral-life",
"senior...