title: React js autocomplete user object in Rails 4
body: <p>I want users to send messages to multiple users in the way that looks like what's implemented in angular's  <a href="https://material.angularjs.org/latest/#/demo/material.components.chips" rel="nofollow">Contact Chips</a> whilst in <strong>rails4 + reactjs</strong> combo.</p>
  
  <p>I've tried using <a href="https://github.com/olahol/react-tagsinput/blob/master/example/completion.html" rel="nofollow">this</a>, but struggled to do the ajax load user part.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@UserAutocomplete = React.createClass(
    mixins: [ React.addons.LinkedStateMixin ]
  
    getInitialState: -&gt;
      tags: []
      completions: []
  
    complete: (value) -&gt;
      value = value.toLowerCase()
      return @setState(completions: [])  if value is ""
      @setState completions: presidents.filter((comp) -&gt;
        norm = comp.toLowerCase()
        norm.substr(0, value.length) is value and @state.tags.indexOf(comp) is -1
      .bind(this))
  
    transform: (tag) -&gt;
      return tag  if @state.completions.indexOf(tag) &gt; -1
      @state.completions[0]  if @state.completions.length is 1
  
    validate: (tag) -&gt;
      @state.completions.indexOf(tag) &gt; -1
  
    change: (tags) -&gt;
      @setState
        tags: tags
        completions: []
  
  
    render: -&gt;
      completionNodes = @state.completions.map((comp) -&gt;
        add = (e) -&gt;
          @refs.tags.addTag comp
        .bind(this)
        React.createElement "span", {}, React.createElement("a",
          className: "president"
          onClick: add
        , comp), " "
      .bind(this))
      tagsInputProps =
        ref: "tags"
        value: @state.tags
        onChange: @change
        onChangeInput: @complete
        transform: @transform
        validate: @validate
        addOnBlur: false
        placeholder: "President"
  
      React.createElement "div", null, React.createElement(TagsInput, tagsInputProps), React.createElement("div",
        style:
          marginTop: "10px"
      , completionNodes)
  )</code></pre>
  </div>
  </div>
  </p>
  
  <p>Questions:</p>
  
  <ol>
  <li>How to ajax load user by tags? I use gem 'acts-as-taggable-on', '~> 3.4'</li>
  <li>How should I handle the ajax loaded user data? Just use the userId or the user object to make the relationships?</li>
  </ol>
  
  <p>Thanks.</p>