如何使用自定义搜索字段上的向下箭头键将焦点移至列表项？

Question

我将按照本教程在我的角度应用程序中构建自定义自动建议功能。

它基本上包括一个HTML输入标签，用户可以在其中输入查询字段，然后是一个无序列表，其中包含匹配结果的列表。

这种设计的问题在于，一旦用户在查询字段中输入字符串并且匹配的结果显示在下面，按向下数组键就不会将焦点移到列表中的第一个结果上以进行选择。 现在只能通过单击列表项来选择该选项。

例如：

如果查询字符串为“ jac”，则显示的结果列表为“ jacob”，“ jack”，“ jaccard”等。按向下箭头键时，我希望焦点转移到第一个结果为“ j​​acob” 。

这是代码：

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。

提前致谢！

Answer 1

看看ng2-ui / auto-complete

很棒的组件，您可以参考它来构建您的自定义组件。

演示