title: react-select using onInputChange with ajax call
body: <p>i'm using <a href="https://github.com/JedWatson/react-select" rel="nofollow">react-select</a> and trying to update the <strong>options</strong> array dynamically with <strong>onInputChange</strong> props via an ajax call, the problem here is text input got reseted everytime user press a key because of DOM update. My code is following</p>
  
  <pre><code>render: function() {
      var valueField;
      if(this.props.editAble){
  
          valueField =  &lt;td className="col-md-12"&gt;
                                          &lt;Select ref="child" options={options} onInputChange={this._getUsers}/&gt;
                                      &lt;/td&gt;;
      }
      else{
          valueField = &lt;td&gt;{this.props.value}&lt;/td&gt;;
      }
  
      return (
          &lt;tr&gt;
              &lt;td className="info-key"&gt;{this.props.param}&lt;/td&gt;
              &lt;td className="sep"&gt;:&lt;/td&gt;
              {valueField}
          &lt;/tr&gt;
      );
  },
  _getUsers: function(input){
      UserActions.search(input);
      var optionsDirty = UserStore.getUsers();
      options = [];
      //debugger;
      optionsDirty.map(function(option){
          options.push({value:option.id, label:option.firstName+' '+option.lastName});
      });
      this.forceUpdate();
  }
  </code></pre>
  
  <p>what i try to get here is something like
  <a href="http://i.stack.imgur.com/meAdJ.png" rel="nofollow">stackoverflow tags input</a> (similar but not exactly same)</p>