Setting Suggestion Value from Object property

[GiovanniL19]

Hi,

I am unsure on how to set the suggestion value. For example

The first result should say 'Test', the object contains a value called companyName which I would like to use.

My handlebar looks like this
{{aupac-typeahead action=(action (mut typeAheadCase)) class='form-control' display=source.companyName source=assignToCases placeholder='Search for a case'}}

[jackmatt2]

It need to reference a function, try this on your controller.

getDisplayKey(model) {
  return Ember.get(model, 'companyName');
}

And then set the display property to reference that function.

{{aupac-typeahead class="form-control" action=(action (mut typeAheadCase)) class='form-control' display=getDisplayKey source=assignToCases placeholder='Search for a case'}}

[GiovanniL19]

Thanks @jackmatt2 for your quick response! The function works great however the display is still showing the object :/

[jackmatt2]

Try supplying a custom suggestion template - inside the template you can do:

{{model.companyName}}

https://github.com/aupac/ember-aupac-typeahead#using-your-own-custom-template

[jackmatt2]

@GiovanniL19 is this issue solved?

[GiovanniL19]

@jackmatt2 sorry for late reply, been really busy! still no luck :/ I will probably start it again from scratch in a different project and see if the same issue happens

[GiovanniL19]

Solved! this is the code that worked for me:

assignToCases: function(query, syncResults, asyncResults) {
    var regex = new RegExp(`.*${query}.*`, 'i');
    var results = casesList.filter((item, index, enumerable) => {
      return regex.test(item.get('companyName'));
    })

    const nameList = [];
    results.forEach(function(result) {
      nameList.push(result.get('companyName'));
    });
    syncResults(nameList);
  }

Thanks @jackmatt2 for your help! 👍

[initram]

I also have this problem, I would really like to avoid having to return a list of strings from the source function.

the issue can be seen here: https://ember-twiddle.com/9ce5aa66ba8908046044ac5dd7b68961?openFiles=controllers.application.js%2C

The suggestion text is displayed correctly in the search box, but not in the drop down.

Also: why is the scollbar always displayed?

[jackmatt2]

yes, this is quite annoying. You can get around it in the suggestion by supplying a custom suggestion template but it is still displaying as [object object] in the text field once something is selected.

[initram]

Is there a reason why you always provide your own templates as default instead of relying on the default templates from typeahead? It seems that this is causing at least one of the issues seen here. You do not use the display function in your default suggestion template, but if you simply omitted the template then typeahead would supply a default template that does it correctly.

I am not sure about the issue with setting the text in the box when it is selected yet.

[initram]

I got it to work, but I don't think that it is pretty or clear that this is what is needed to support object suggestions:

https://ember-twiddle.com/9ce5aa66ba8908046044ac5dd7b68961?openFiles=controllers.application.js%2C

I had to set both the "display" and "transformSelection" (why does the component expose both? when would it make sense for them to be different?) to my function that pulls out the string, I also had to implement a function that can handle both strings and objects to be used as the action. As it will call it with the suggestion object first and the with the pure sting later.

[jackmatt2]

Agree, having two places for this makes no sense.
On 7 Jul 2016 5:12 p.m., "Martin Midtgaard" [email protected]
wrote:

I got it to work, but I don't think that it is pretty or clear that this
is what is needed to support object suggestions:

https://ember-twiddle.com/9ce5aa66ba8908046044ac5dd7b68961?openFiles=controllers.application.js%2C

I had to set both the "display" and "transformSelection" (why does the
component expose both? when would it make sense for them to be different?)
to my function that pulls out the string, I also had to implement a
function that can handle both strings and objects to be used as the action.
As it will call it with the suggestion object first and the with the pure
sting later.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
#14 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AGDdOIA7iO8mmdu6gBRKRr_cEOj6oZ_nks5qTKbYgaJpZM4Hi87B
.