我正在按照THIS教程在我的角度应用程序中构建自定义自动建议功能。
它基本上包括一个HTML输入标签，用户可以在其中输入查询字段，然后是一个无序列表，其中包含匹配结果的列表。
此设计的问题在于，一旦用户在查询字段中输入字符串并且匹配结果显示在下面，按向下数组键就不会将焦点放在列表中的第一个结果上以进行选择。现在只能通过单击列表项来选择该选项。
例如：
如果查询字符串为“ jac”，则显示的结果列表为“ jacob”，“ jack”，“ jaccard”等。按向下箭头键时，我希望焦点移至第一个结果，即“雅各布”。
代码如下：
search.component.html
<div class="input-group">
<input type="text" class="form-control" [formControl]="queryField" value="queryField" id="companyName"
placeholder="Company Name">
<span class="input-group-addon">
<button class="arrow" type="submit" (click)="getCompanyDetails()">
<span>
<img src="../../assets/ic-arrow-forward.svg" class="ic_arrow_forward">
</span>
</button>
</span>
<ul class="filter-select">
<li class="filter-select-list" *ngFor="let result of searchResults; let i = index" (click)="listClick(result)">
<span class="comp-name">{{ result.companyName }}</span>
</ul>
</div>
search.component.ts
listClick(selectedCompany) {
this.searchResults = null;
this.service.companyName = selectedCompany.companyName;
this.queryField.setValue(selectedCompany.companyName, {emitEvent: false});
}
ngOnInit() {
this.queryField.valueChanges
.pipe(debounceTime(200))
.pipe(distinctUntilChanged())
.pipe(switchMap((queryField) => this.service.search(queryField)))
.subscribe(
(response) => {
this.searchResults = response;
});
}
如何最好地不使用jQuery来实现这一点。
谢谢！