Add custom data attributes to Semantic UI Dropdown when items are retrieved via Ajax

Here is how I was building my dropdown (in haml):

#my_dropdown.ui.dropdown{ data: { path: objects_path } }
  = f.hidden_field :my_id
  %i.dropdown.icon
  .default.text Text
  .menu
    - @collection.each do |object|
      .item{ data: { value: object.id, text: object.name, color: object.color } }
        = object.name

This was working great. My .item elements had extra data, such as .data('color'). I decided I wanted to switch to an ajax approach instead of loading all of the elements at once.

$.fn.api.settings.api =
    'search objects': $('#my_dropdown').data('path') + '?q={query}'

$('#my_dropdown').dropdown
    apiSettings:
      action: 'search objects'

    onChange: (value, text, selectedItem) ->
      console.log selectedItem.data()

Here is what my returned JSON looks like:

{
  "success":true,
  "results": [
    { "name":"Object #1", "value":1, "color":"blue" },
    { "name":"Object #2", "value":2, "color":"red" },
    { "name":"Object #3", "value":3, "color":"green" }
  ]
}

When I do the console.log selectedItem.data() after the dropdown select is changed, I only see:

{ value: 1 }

And the generated HTML looks like:

<div class="item" data-value="1">Object #1</div>
<div class="item" data-value="2">Object #2</div>
<div class="item" data-value="3">Object #3</div>

How can I get the items to include the custom data attributes, such as data-color while using Ajax?