auto_complete.html




    
    Hello React!

    

    
    
    

js/auto_complete.js

var AutoComplete = React.createClass({
	list:["apple","banana","grape","org","orange"],

	timeout:null,

	getInitialState:function(){
		return {
			open:null,
			matchedItems:this.generateLiHtml(this.list)
		}
	},

	generateLiHtml:function(list){
		var matchedItems = [];
    for(var i=0;i0){
		    open = "open";
      }

      var matchedItems = that.generateLiHtml(result);
      that.setState({matchedItems:matchedItems,open:open});
    },300);

  },

  render: function() {

    return  React.DOM.div(
              {className:"auto-complete"},
              React.DOM.input({type:"text",onKeyUp:this.keyUpHandler}),
              React.DOM.div(
                {className:this.state.open},
                React.DOM.ul(null,
                  this.state.matchedItems
                )
              )
            );
  }
});

ReactDOM.render(
    React.createElement(AutoComplete),
    $("#autocomplete")[0]
);

css/auto_complete.css

.auto-complete{
	width:200px;

}

.auto-complete input{
	width:100%;
	box-sizing:border-box;
}
.auto-complete>div{
	display:none;
	padding-top:10px;
}

.auto-complete>div.open{display:block;}

.auto-complete>div ul{
	padding:0;
	margin:0;
	list-style-type: none;
	border:1px solid #ccc;
}

.auto-complete>div ul li{
	height:30px;
	line-height: 30px;
	border-bottom:1px solid #ccc;
	padding-left:10px;
}

.auto-complete>div ul li:hover{
	background-color:#eaeaea;
	cursor:pointer;
}

.auto-complete>div ul li:last-child{
	border-bottom:none;
}