     description: ""
 
   componentDidMount: ->
-    @updateAutocomplete()
+    @updateAutocomplete()  # Initialize the jQuery UI autocomplete.
 
   componentDidUpdate: ->
-    @updateAutocomplete()
+    @updateAutocomplete()  # Update the jQuery UI autocomplete.
 
   componentWillUnmount: ->
-    # get rid of the extra HTML that jQuery UI autocomplete creates.
+    # Remove the extra HTML that jQuery UI autocomplete creates.
     $(React.findDOMNode(@refs.room)).autocomplete('destroy')
     $(React.findDOMNode(@refs.category)).autocomplete('destroy')
 
+  # Sets up the jQuery UI autocomplete on the real DOM with the provided data.
+  # When an autocomplete item is selected, updates the value accordingly.
   updateAutocomplete: ->
     $(React.findDOMNode(@refs.room)).autocomplete
       source: @props.roomSuggestions
-      select: (e, ui) =>
-        @setState room: ui.item.value
+      select: (e, ui) => @setState room: ui.item.value
 
     $(React.findDOMNode(@refs.category)).autocomplete
       source: @props.categorySuggestions
-      select: (e, ui) =>
-        @setState category: ui.item.value
+      select: (e, ui) => @setState category: ui.item.value
 
+  # Updates the active element's value based on user's input.
   handleChange: (e) ->
     name = e.target.name
     @setState "#{ name }": e.target.value

          R.input
            type:        'text'
            className:   'form-control'
            ref:         'room'  # for autocompletion
            name:        'room'  # for @handleChange
            placeholder: 'Room'
            value:       @state.room

          R.input
            type:        'text'
            className:   'form-control'
            ref:         'category'  # for Autocomplete to access the DOM
            name:        'category'  # for @handleChange
            placeholder: 'Category'
            value:       @state.category
