0

I'm using the Angular autocomplete in a project.

The user can navigate the autocomplete results with arrow-up and arrow-down. However, I would like to make it behave like the google-suggest does; when selecting a value using arrow-up or arrow down, that the input text also changes.

I currently have the optionSelected but I need it before selection.

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectSuggestion($event)">
    <mat-option *ngFor="let result of (suggestions$ | async)" [value]="result">
        {{ result.suggestion }}
    </mat-option>
</mat-autocomplete>

So for example; I type jag, the autocomplete might suggest jaguar. I navigate to that entry using the arrows and type car. The input would ideally contain jaguar car by then.

What would be the best approach to accomplish this?

UPDATE:

I can use the optionActivated, but then just as I select the first entry, it gets activated and put in the search-input. I don't want that, I want it to get in the searchbox if the user starts typing when an item is still selected.

Rob Audenaerde
  • 19,195
  • 10
  • 76
  • 121
  • 2
    It seems that the option highlighted with the keyboard arrows can be _selected_ by the enter key. Isn't that enough? But to specifically answer your question, the the autocomplete has an output called `optionActivated` which seems to be what you are looking for. – Alex Biro Jul 27 '20 at 14:11
  • As @AlexBiro mentioned, i think you can update the value on navigation with arrow up and down keys. would you mind to share more code you did? – critrange Jul 27 '20 at 19:09
  • @AlexBiro replacing the text on optionActivated is not good enough; it just triggers the first option I navigate to. – Rob Audenaerde Jul 28 '20 at 07:44

0 Answers0