React Autocomple(Dropdown)

using react to complete a autocomplete(dropdown) module!

by Arif Hasan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.autocomplete {
    background: #676767;
    /*width: 400px;*/
    display: inline-block;
    position: relative;
}

.autocomplete input {
    box-sizing: border-box;
    width: 100%;
    outline: none;
    border: 0px solid #676;
    background: #eee;
    /*height: 35px;*/
    position: relative;
    padding: 0 5px;
    left: 0;
    right: 0;
}

.autocomplete .popup {
    position: absolute;
    /*top: 35px;*/
    left: 0;
    right: 0;
    display: block;
    background: white;
    border-left: 2px solid #eee;
    border-right: 2px solid #eee;
    border-bottom: 2px solid #eee;
    box-shadow: 0px 1px 1px #a1a1a1;
}

.autocomplete .popup div {
    display: block;
    background: white;
    padding: 2px 5px;
    text-decoration: none;
    cursor: default;
    color: #2f3129;
}

.autocomplete .popup div:hover {
    background: #eee;
}

JavaScript 1.7

var data = ['aaaa','bbbbbbbbbbbbb','ccc','ababa','cdcd','cccs'];

var Autocomplete = React.createClass({
    getInitialState:function(){
        return {
            ori_urls:this.props.data,
            urls:[],
            url:this.props.default || ''
        };
    },
    handleInput:function(e){
        console.log('input clicked!');
        this.state.url = e.target.value;
        this.state.urls = this.state.ori_urls.filter(function(item){
            if(item.includes(e.target.value)){
                    return true;
            }
            return false;
        });
        this.setState(this.state);
    },
    handleAClick:function(e){
        this.state.url = e.target.value;
        this.state.urls = [];
        this.setState(this.state);
    },
    componentDidMount:function(){
        document.addEventListener("mousedown",this.pageClick,false);
    },
    pageClick:function(e){
            var env = e.target;
            if(env === this._input || env===this._popup || env.parentNode === this._popup)
            {
                console.log('inside '+e.target);
                return;
            }
            console.log('outside '+e.target);
            this.state.urls = [];
            this.forceUpdate();
    },
    componentWillUnmount:function(){
        document.removeEventListener("mousedown",this.pageClick)
    },
    render:function(){
        var self = this;
        if(this.props.openPopup){
            this.state.urls = [];
            this.setState(this.state);
        }
        var popups = this.state.urls.map(function(url){
                return (
                   <a href="#" onClick={self.handleAClick} value={url} >{url} />
                   
                );
        });
        var autocompleteStyle={width:this.props.width};
        var inputStyle = {height:this.props.height};
        var popupStyle = {top:this.props.height};
        var className = 'autocomplete '+this.props.className;
        return (
            <div...