Using Select2 in Ember.js

Question

I'm really having difficulty integrating select2 in ember.

I want to transform this:

<input type="hidden" value=user />

into a search input with ajax using select2 and bind the selected result to the user attribute in model.

Please help.

Answer 1

{{view}} is deprecated in ember 2.0 +

I found this project that emberfies select2 into a component

ember install ember-select-2

or this one

ember install ember-select-guru

Edit 1:

There is also a more active nativley built one and you should probably use this one

ember install ember-power-select

repo

Answer 2

You must first give a normal select box and apply select2 after that. To create a select box in ember,

{{view Ember.Select viewName="select2View"
                contentBinding="optionList"
        optionLabelPath="content.label"
        optionValuePath="content.value"
        prompt=""
        valueBinding="user"}}

where "optionsList" is the list to be populated in select. See the example below

[{"label": "label1", "value":1}, {"label": "label2", "value":2}]

Then if label1 is selected, "user" will have a value 1.

OR

alternatively you can also refer this Git

Answer 3

I know you're specifically asking for Select2 help, but if the exact library you're using isn't that important, you might want to try the select widget by Addepar. It's based off of Select2, so it's very similar. It will provide the search functionality for you and will bind the selected value for you. It's also fairly easy to customize the styling of it.