     room:        ""
     category:    ""
     description: ""
+
+  componentDidMount: ->
+    @updateAutocomplete()
+
+  componentDidUpdate: ->
+    @updateAutocomplete()
+
+  componentWillUnmount: ->
+    # get rid of the extra HTML that jQuery UI autocomplete creates.
+    $(React.findDOMNode(@refs.room)).autocomplete('destroy')
+    $(React.findDOMNode(@refs.category)).autocomplete('destroy')
+
+  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
 
   handleChange: (e) ->
     name = e.target.name

          R.div
            className: 'form-group col-sm-4'
            R.button
              type:      'submit'
              className: "btn btn-default btn-block"
              onClick: @handleClear
              'Clear'

    @state.category && @state.category.length <= 50
  validDescription: ->
    @state.description.length <= 200
  fieldColor: (validator) ->
    if validator then 'has-success' else 'has-warning'

  capitalize: (string) ->
    string.charAt(0).toUpperCase() + string.slice(1)

  render: ->
    R = React.DOM
