Angular 4 scroll with arrow keys from text field to <li> - html

Question

I am trying to implement a google like search field, i have partially managed but what i cant make work is the arrow scrolling possibility.
I would like, same as in their search field, to be able to scroll through the search result list with the arrow keys from the search field:
What i have so far is the following:
<div>
<div class="searcher">
<input name="term" #term class="ng-valid ng-touched" size="60"
placeholder="Start typing something...." (keyup)="invokeAutoSuggest(term.value)" (click)="showElement = !showElement">
<br/>
</div>
</div>
<div id="autosuggestBox" class="autoSuggestGoogleLike" [hidden]="!showElement">
<div class="autoSuggestDiv" *ngFor="let suggestion of suggestions" (click)="searchFromAutosuggest(suggestion.type,suggestion.value)" (click)="showElement = !showElement">
{{suggestion.type}}:{{suggestion.value}}
</div>
</div>
The css:
.autoSuggestGoogleLike{
border: 1px solid grey;
width: 450px;
height: 200px;
position: relative;
z-index:3;
background-color : white;
margin-left:-228px;
position: absolute;
left:50%;
overflow: scroll;
}
So searcher is the text field, and autosuggestBox the placeholder showing the results as list, i would like to be able to click the down arrow from the searcher text field and access the results.
Any advice?
Does it have to do with relationship between the divs?

Answer 1

You have to check the keyCode first in your invokeAutoSuggest function, to detect up/down keypress then based on these you can increase/decrease the activeIndex. Like this ...
In component
...
private activeIndex: number = 0;
public invokeAutoSuggest(ev: Event) {
if (38 === ev.keyCode) {
return this.prevActiveMatch();
}
if (40 === ev.keyCode) {
return this.nextActiveMatch();
}
// your code ...
}
public nextActiveMatch() {
this.activeIndex = this.activeIndex < this.list.length - 1 ? ++this.activeIndex : this.activeIndex;
}
public prevActiveMatch () {
this.activeIndex = this.activeIndex > 0 ? --this.activeIndex : 0;
}
...
In template
...
<div class="searcher">
<input name="term" #term class="ng-valid ng-touched" size="60"
placeholder="Start typing something...." (keyup)="invokeAutoSuggest($event)" (click)="showElement = !showElement">
</div>
...
<div class="autoSuggestDiv" *ngFor="let suggestion of suggestions; let i = index" (click)="searchFromAutosuggest(suggestion.type,suggestion.value)" (click)="showElement = !showElement" [ngClass]="{active: i===activeIndex}">
{{suggestion.type}}:{{suggestion.value}}
</div>
...
To see the selected list item
styles: [`
.active {
background: blue;
color: white;
}
`]