#ember-power-select, How to set a preselected value in ember-power-select custom-search-action

@Rinold_Simon wrote:

There must be a value set in "selected" attribute before typing in search parameter".Can anyone help me to sort this out ? #ember-power-select.

It is working with normal action-handling by setting a value for "destination" in js and assigning "destination" to "selected". Have a look at here for such examples http://www.ember-power-select.com/docs/action-handling.

But can't assign a value for custom-serach-action http://www.ember-power-select.com/docs/custom-search-action.

• model

hpqualifcation.js

import DS from 'ember-data';
export default DS.Model.extend({
 type_name: DS.attr('string'),
 hoprofile: DS.belongsTo('hoprofile')
});

hoprofile.js

import DS from 'ember-data';
export default DS.Model.extend({
  name: DS.attr('string'),
  hpqualification: DS.hasMany('hpqualification')
});

• routes

import Ember from 'ember';
model: function(params){
 return Ember.RSVP.hash({
  hpqualifications: this.store.query('hpqualification', {username: params.username}),
  …
  …
 });
}

• data from API side

    "hpqualification": [
        {
            "id": 1,
             type_name": "UG",
            "hoprofile": 1
        },
        {
            "id": 1,
             type_name": "PG",
            "hoprofile": 2
        }
    ],
    "hoprofile": [
        {
            "id": 1,
            "name": "silicon guy",
            "hpqualifications": [1]
        },
        {
            "id": 2,
            "name": "power star",
            "hpqualifications": [2]
        }
    ]
}

- templates Used ember-power-select custom-search-action, where the request will be sent to API side for typing each letter and the data returned will be displayed in select box options http://www.ember-power-select.com/docs/custom-search-action.

{{#each model.hpqualifications as |hpqualification|}}
{{#power-select
  selected=hpqualification.hoprofile.name
  search=(action "hoProfile")
  onchange=(action (mut hpqualification.hoprofile.name))
  as |repo|
}}
  {{repo.name}}
{{/power-select}}
{{/each}}

- components

import Ember from 'ember';
export default Ember.Component.extend({
actions: {
  hoProfile(term){
    if (Ember.isBlank(term)) { return []; }
    const url = `//localhost:3000/betaweb/filters/hoprofiles?  name=${term}`;
    return Ember.$.ajax({ url }).then(json => json.hoprofiles);
  }
}
});

- data returned for power-select action

    "hoprofiles": [
        {
            "id": 7,
            "name": "silicon guy"
        },
        {
            "id": 14,
            "name": "power star"
        }
    ]
}

Everything is working fine. But in ember-power-select the preselected value is not getting selected. The select box is blank before typing in search parameter . normally using the below code the value is visible

{{#each model.hpqualifications as |hpqualification|}}
 <label>HO Profile Name<label>
 <li> {{input value=hpqualification.hoprofile.name}} </li>
{{/each}}

It displays all the data that is returned from API side.

HO Profile Name
- silicon guy
- power star

But when i use ember-power-select the data is not getting preselected in select box. I have tried many ways but it didn’t sort me out. Can anyone please get me a solution or an alternate way to do this using power-select ?

Posts: 1

Participants: 1

Read full topic