ember-cli-chosen

This addon allows you to use the popular Chosen jQuery plugin in your ember-cli application.

ember-cli-chosen works with ember-cli version '0.1.5' or later

Always view the latest readme via Github!

View Demo

Installation

``bash
ember install:addon ember-cli-chosen
`

Build Options

There are two different build options you can supply to customize what Chosen files are included in your build.

$3

By default, ember-cli-chosen will provide the version of Chosen that includes jQuery (chosen.jquery.js).
To use the version of Chosen without jQuery, specify false for the jQuery property.

`javascript
var EmberApp = new EmberApp({
'ember-cli-chosen': {
'jQuery': false
}
});
`

$3

By default, ember-cli-chosen will include Chosen's CSS (as well as its sprites) in the build.

To prevent Chosen's CSS from being included in the build, specify false for the importChosenCSS property.'

NOTE: Specifying false for the importChosenCSS property will also cause the Chosen sprites to be removed from the build.

`javascript
var EmberApp = new EmberApp({
'ember-cli-chosen': {
'importChosenCSS': false
}
});
`

Component

$3

In a template, render the component via ember-chosen:

`hbs
{{#ember-chosen}}
Tom Dale
Yehuda Katz
...
{{/ember-chosen}}
`

$3

ember-cli-chosen allows you to specify values for all of the available options that Chosen exposes.

All of the options below are watched for changes. If a change occurs, Chosen is re-initialized with the updated options.

#### disableSearchThreshold

The number of options at which the search functionality should be disabled.

`hbs
{{#ember-chosen disableSearchThreshold=10}}
...
{{/ember-chosen}}
`

#### isRtl

Right-to-left mode. This will add the chosen-rtl class to the select input.

`hbs
{{#ember-chosen isRtl=true}}
...
{{/ember-chosen}}
`

#### maxSelectedOptions

Set the maximum allowed number of selected options.

`hbs
{{#ember-chosen maxSelectedOptions=5}}
...
{{/ember-chosen}}
`

$3

Allows multiple selections.

`hbs
{{#ember-chosen multiple=true}}
...
{{/ember-chosen}}
`

#### noResultsText

The text to be displayed when no results are available as a result of a search.

`hbs
{{#ember-chosen noResultsText="Sorry, nothing to display!"}}
...
{{/ember-chosen}}
`

#### prompt

The placeholder for your Chosen input. This will set the data-placeholder attribute.

**NOTE: For prompt to be displayed for single item select inputs, you must provide an empty as the first
option for your input**

`hbs
{{#ember-chosen prompt="Select one..."}}

...
{{/ember-chosen}}
`

#### width

Sets the width of the input.

Default: "100%"

$3

ember-cli-chosen supports the following actions:

#### selectionDidChange

The action fired when the user updates their selection. For multiple select inputs, this includes selection AND
deselection.

Note: For multiple selects, the parameter passed to your action is an array of the currently selected items.

`hbs
{{#ember-chosen selectionDidChange="onSelectionChanged"}}
...
{{/ember-chosen}}
`

`javascript
export default Ember.Controller.extend({
// Controller implementation
actions: {
onSelectionChanged: function(selectedValue) {
// selectedValue will be a single value for single selects
// and an Array for multiple selects
console.log('User selected:', selectedValue);
}
}
});
`

#### chosenMaxSelected

The action fired when maxSelectedOptions has been set and the user tries to select an additional value after
maxSelectedOptions has been met.

`hbs
{{#ember-chosen multiple=true maxSelectedOptions=5 chosenMaxSelected="onChosenMaxSelected"}}
...
{{/ember-chosen}}
`

`javascript
export default Ember.Controller.extend({
// Controller implementation
actions: {
onChosenMaxSelected: function(e, chosen) {
// e: jQuery Event
// chosen: The Chosen object for the input that triggered the event
alert("You can't do that!");
}
}
});
``