Auto Complete: Selection after tpying and pressing Enter

[TomTomRixRix]

In all Auto Complete field, mainly the Studierendes and Ordner fields, it would be nice if one could simply type in an item and select it by pressing Enter in the end. This should obviously only work when the corresponding item exists in the list. Especially when selecting folder this would be really convenient as one would only tpye ''KM1A" + "Enter" and does not need to look at the screen at all and find the right item.

[SinForest]

Also, like on many other websites, the folder name should be confimable via the , key.

[samuscherer]

Alternatively, we could use semicolons instead of commas.

[henrixapp]

Help wanted. Not supported by ember-paper yet. adopted-ember-addons/ember-paper#871

[Sedrunum]

We are waiting for external help.

[xomaczar]

Using defaultHighlighted with paper-autocomplete, solves this issue. DefaultHighlighted will highlight the first match allowing user to hit ENTER key and select w/o using mouse. We can add an example to dummy app so it’s clear for everyone.

[Sedrunum]

@xomaczar Does this also work if I use the search function to create my options' list for the autocomplete field which queries the remote database for matching keywords?

My approach so far:

save the queried results to a variable (studentoptions) inside the controller
-> add defaultHighlighted=(take 1 studentoptions) to the autocomplete tag

Sadly I haven't observed any difference - the first entry is still not highlighted.

[Sedrunum]

(take 1 studentoptions) is part of the ember-composable-helper package

[Sedrunum]

From my understanding the defaultHighlighted option only highlights the specified entry when the list is initially opened. If I modify the provided options to select from the defaultHighlighted option wont help me focusing/highlighting the first entry since I have already abandoned the initial state.

[xomaczar]

Yeah it should work -defaultHighlighted should be a function that returns an item that you would like to highlight. take helper returns an item instead of a func. So just define a function - you can find out the signature from eps official docs
https://ember-power-select.com/docs/api-reference

[Sedrunum]

If anyone of you had time, could you provide an example to dummy app? At the moment, it doesn't seem as if the function is actually called if I provide defaultHighlighted=(action 'firstFolder). Thanks in advance

[xomaczar]

What version of ember-paper are you using?

[Sedrunum]

1.0.0-beta.7

[xomaczar]

Try it on beta.8

[Sedrunum]

tried it, same result