A single-select version of andriybuday's multiple-select Ember Chosen.js component

input-chosen-ember-component.js

App.InputChosenComponent = Ember.Component.extend(
  init: ->
    @_super()
    return

  # view properties
  labelClasses: (->
    @get("labelClass") + " control-label"
  ).property("labelClass")
  inputContainerClasses: (->
    @get("inputContainerClass") + " input-group"
  ).property("inputContainerClass")
  inputClasses: (->
    @get("inputClass") + " form-control chosen-select"
  ).property("inputClass")
  disabledFixer: (->
    chosenSelect = @$(".chosen-select")
    chosenSelect.prop("disabled", @get("intputDisabled")).trigger "chosen:updated"
    chosenSelect.trigger "chosen:updated"
    return
  ).observes("intputDisabled")
  
  # dom stuff
  setup: (->
    chosenSelect = $(".chosen-select")
    chosenSelect.find("script").remove()
    chosenSelect.chosen()
    
    # styling setup
    chosenSelect.attr "data-placeholder", @get("dataPlaceholder")
    $(".chosen-choices").addClass @get("inputContainerClass")
    $(".search-field > input").addClass "form-control"
    
    # initial values
    optionValueName = @get("optionValuePath").replace("content.", "")
    currentSelection = @get("chosenSelection").get optionValueName
    chosenSelect.val currentSelection
    chosenSelect.prop("disabled", @get("intputDisabled")).trigger "chosen:updated"
    chosenSelect.trigger "chosen:updated"
    
    # handling changes
    self = this
    chosenSelect.chosen().change (event, item) ->
      if item.selected
        val = parseInt(item.selected)
        selectedItem = self.get("content").findBy(optionValueName, val)
        self.set "chosenSelection", selectedItem
      return

    return
  ).on("didInsertElement")
  teardown: (->
  ).on("willDestroyElement")
)

input-chosen-ember-template.hbs

<label {{bind-attr class="labelClasses"}} {{bind-attr for="inputField.elementId"}}>{{label}}</label>
<div {{bind-attr class="inputContainerClasses"}}>
  {{view Ember.Select 
    class=inputClasses
    prompt=prompt
    content=content
    value=value  
    multiple=multiple
    selection=selection
    chosenSelection=chosenSelection
    dataPlaceholder=dataPlaceholder
    optionLabelPath=optionLabelPath 
    optionValuePath=optionValuePath
    intputDisabled=intputDisabled
    viewName="inputField"}}
</div>

usage.html

<div class="form-group">
	{{input-chosen label="My Team" multiple="true" labelClass="col-sm-1" inputContainerClass="col-sm-5"
	contentBinding="allPlayers" chosenSelectionBinding="myTeamPlayers"
	optionLabelPath="content.fullName" optionValuePath="content.playerId
	dataPlaceholder="Choose team..."}}
</div>