   # -- Render
   render: ->
     <div data-component-autocomplete={@props.type}
-         className={className = "focus" if @state.focus}>
+         className={"focus" if @state.focus}>
       {
         if @props.multiple
           <ul data-role="values" data-flex="horizontal wrap" onClick={@onDelete}>
-            {<li id={key}>{label}</li> for key, label of @state.values}
+            {
+              for key, label of @state.values
+                <li id={key} style={backgroundColor: @props.colors[key]}>{label}</li>
+            }
           </ul>
       }
-      <Input {...@props} value="" ref="input" onChange={@onChange}
-             onKeyPress={@onKeyPress} onFocus={@onFocus} onBlur={@onBlur}/>
+      <Input {...@props} value="" ref="input" onFocus={@onFocus}
+             onChange={@onChange} onKeyPress={@onKeyPress} onBlur={@onBlur}/>
       <ul ref="suggestions" data-role="suggestions" onClick={@onSelect}>
         {<li id={key}>{label}</li> for key, label of @state.suggestions}
       </ul>

    data = [data] if typeof data is 'string'
    values = {}
    values[key] = label for key, label of @state.dataSource when key in data
    @setState values: values
    @refs.input.setValue values[Object.keys(values)?[0]] unless @state.multiple

  setError: (data) ->
    @refs.input.setError data

  getDefaultProps: ->
    type        : "text"
    dataSource  : {}
    colors      : {}
    multiple    : true
    exact       : true

  getInitialState: ->
    focus       : false
    dataSource  : _index @props.dataSource
    suggestions : {}
    values      : {}

  # -- Lifecycle
  componentDidMount: ->
    @setValue @props.value if @props.value

  componentWillReceiveProps: (next_props) ->
    @setState dataSource: _index next_props.dataSource if next_props.dataSource

  # -- Events
  onFocus: ->
    @refs.suggestions.getDOMNode().scrollTop = 0
    @setState focus: true, suggestions: @_getSuggestions()

  onChange: ->
    suggestions = {}
