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 ?
