auto_complete.html




    
    Hello React!

    

    
    
    
    

css/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;i{list[i]});
        }
        return matchedItems;
	},

  clickHandler:function(e){
    e.stopPropagation();
    e.preventDefault();

    var liItem = $(e.target);

    var content = $(liItem).html();

    $(ReactDOM.findDOMNode(this)).find("input").val(content);
    this.setState({open:""});

  },


  keyUpHandler:function(e){
    e.stopPropagation();

    clearTimeout(this.timeout);

 		var val = e.target.value;

 		var that = this;

    this.timeout = setTimeout(function(){
		  var result = [];

        for(var i=0;i0){
		    open = "open";
      }

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

  },

  render: function() {

      return (
          
            
            
              
    
                  {this.state.matchedItems}