React.js, jQuery-ui, Autocompleteで語句候補ドロップダウン ref: http://qiita.com/mnishiguchi/items/73f9540fe38854df7379

application.js

// 例
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap
//= require turbolinks
//= require jquery-ui/autocomplete
//= require react
//= require react_ujs
//= require growl
//= require components
//= requre_tree .

autocomplete.scss

ul.ui-autocomplete {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  border: solid 1px #999;
  cursor: default;
  li {
    background-color: #FFF;
    border-top: solid 1px #DDD;
    margin: 0;
    padding: 2px 15px;
    a {
      color: #000;
      display: block;
      padding: 3px;
    }
    a.ui-state-hover, a.ui-state-active {
      background-color: #FFFCB2;
    }
  }
}

file0.txt

ruby 2.2.1
Rails 4.2.1

NewRecordForm.js.coffee

@NewMovingRecordForm = React.createClass
  # 元の状態
  getInitialState: ->
    name:        ""
    volume:      ""
    quantity:    ""
    room:        ""
    category:    ""
    description: ""

  # 一字一句入力時に状態データを更新する。
  handleChange: (e) ->
    name = e.target.name
    @setState "#{ name }": e.target.value

  # 提出ボタンが押された時の処理をここに記述する。
  handleSubmit: (e) ->

  # UIを元の状態（空フォーム）に戻す。
  handleClear: (e) ->
    @setState @getInitialState()

  # 入力内容の検証
  valid: ->
    @validName() && @validVolume() && @validQuantity() &&
    @validRoom() && @validCategory() && @validDescription()
  validName: ->
    @state.name && @state.name.length <= 50
  validVolume: ->
    @state.volume && @state.volume.length <= 10
  validQuantity: ->
    @state.quantity && @state.quantity.length <= 10
  validRoom: ->
    @state.room && @state.room.length <= 50
  validCategory: ->
    @state.category && @state.category.length <= 50
  validDescription: ->
    @state.description.length <= 200

  # Reactによりマークアップが生成された直後に呼ばれる。ここでjQueryが実際のDOMに対してAutocompleteを初期化する。(Reactは知らない）
  componentDidMount: ->
    @updateAutocomplete()

  # Reactによりマークアップが更新された直後に呼ばれる。ここでAutocompleteを更新する。
  componentDidUpdate: ->
    @updateAutocomplete()

  # jQueryが作ったAutocompleteを消去する。
  componentWillUnmount: ->
    $(React.findDOMNode(@refs.room)).autocomplete('destroy')
    $(React.findDOMNode(@refs.category)).autocomplete('destroy')

  # Autocomplete初期化・更新の処理。
  updateAutocomplete: ->
    $(React.findDOMNode(@refs.room)).autocomplete
      source: @props.roomSuggestions
      select: (e, ui) =>
        @setState room: ui.item.value

    $(React.findDOMNode(@refs.category)).autocomplete
      source: @props.categorySuggestions
      select: (e, ui) =>
        @setState category: ui.item.value

  render: ->
    R = React.DOM

    R.form
      onSubmit:  @handleSubmit
      R.div
        className: 'form-group'
        R.div
          className: "form-group col-sm-12"
          R.input
            type:        'text'
            className:   'form-control'
            placeholder: 'Item name'
            name:        'name'
            value:       @state.name
            onChange:    @handleChange
        R.div
          className: "form-group col-sm-6"
          R.input
            type:        'number'
            min:         "0"
            className:   'form-control'
            placeholder: 'Volume'
            name:        'volume'
            value:       @state.volume
            onChange:    @handleChange
        R.div
          className: "form-group col-sm-6"
          R.input
            type:        'number'
            min:         "0"
            className:   'form-control'
            placeholder: 'Quantity'
            name:        'quantity'
            value:       @state.quantity
            onChange:    @handleChange
        R.div
          className: "form-group col-sm-6"
          R.input
            type:        'text'
            className:   'form-control'
            ref:         'category'  # AutocompleteがDOMアクセスに使用
            name:        'category'  # @handleChange処理時に使用
            placeholder: 'Category'
            value:       @state.category
            onChange:    @handleChange
        R.div
          className: "form-group col-sm-6"
          R.input
            type:        'text'
            className:   'form-control'
            ref:         'room'  # AutocompleteがDOMアクセスに使用
            name:        'room'  # @handleChange処理時に使用
            placeholder: 'Room'
            value:       @state.room
            onChange:    @handleChange
        R.div
          className: "form-group col-sm-6"
          R.textarea
            rows:        '3'
            className:   'form-control'
            placeholder: 'Description'
            name:        'description(optional)'
            value:       @state.description
            onChange:    @handleChange

        R.div
          className: 'col-sm-6'
          R.div
            className: 'form-group col-sm-8'
            R.button
              type:      'submit'
              className: if @valid() then 'btn btn-success btn-block' else 'btn btn-default btn-block'
              disabled:  not @valid()
              'Add item'
          R.div
            className: 'form-group col-sm-4'
            R.button
              type:      'submit'
              className: "btn btn-default btn-block"
              onClick: @handleClear
              'Clear'
        R.div
          className: 'form-group col-sm-6'
          R.span
            id: "helpBlock"
            className: "help-block text-center"
            "Please fill in all the required fields"
      R.div className: "clearfix"

RecordsApp.coffee

@RecordsApp = React.createClass
  # レンダリング時に受け取ったデータ（表を作成するデータ）を覚えておく。
  getInitialState: ->
    records: @props.data

  getDefaultProps: ->
    records: []

  # 新規作成用フォームに入力された内容でデータを追加する。そしてUIを更新。
  addRecord: (record) ->
    records = React.addons.update(@state.records, { $unshift: [record] })
    @setState records: records

  #（中略）

  render: ->
    # React.DOM記述を省略する目的の一時変数。
    R = React.DOM

    R.div
      R.h2 null, "Add a new item"

      # 新規作成フォーム
      React.createElement NewMovingRecordForm,
        # 新規データ処理用のメソッドを渡す。
        handleNewRecord: @addRecord
        # 語句候補のデータを渡す。
        roomSuggestions: @props.roomSuggestions
        categorySuggestions: @props.categorySuggestions
      R.hr null

      # 表
      React.createElement Records,
        records: @state.records,

RecordsApp.js.coffee

@RecordsApp = React.createClass
  # レンダリング時に受け取ったデータ（表を作成するデータ）を覚えておく。
  getInitialState: ->
    records: @props.data

  getDefaultProps: ->
    records: []

  # 新規作成用フォームに入力された内容でデータを追加する。そしてUIを更新。
  addRecord: (record) ->
    records = React.addons.update(@state.records, { $unshift: [record] })
    @setState records: records

  #（中略）

  render: ->
    # React.DOM記述を省略する目的の一時変数。
    R = React.DOM

    R.div
      R.h2 null, "Add a new item"

      # 新規作成フォーム
      React.createElement NewMovingRecordForm,
        # 新規データ処理用のメソッドを渡す。
        handleNewRecord: @addRecord
        # 語句候補のデータを渡す。
        roomSuggestions: @props.roomSuggestions
        categorySuggestions: @props.categorySuggestions
      R.hr null

      # 表
      React.createElement Records,
        records: @state.records,

show.html.haml

%h1.page-header Sample template

= react_component 'RecordsApp', { data: @items,
                   roomSuggestions: Room.all.pluck("name"),
                   categorySuggestions: @moving.moving_items.pluck("category").uniq! }

主なGem

#jQuery-ui/Autocompleteを使うため。
gem 'jquery-ui-rails', '~> 5.0.5'

#React.jsを使うため。
gem 'react-rails',     '~> 1.0.0'

# ...他