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

Question

我在THIS教程之后在我的角度应用程序中构建自定义自动提示功能。

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

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

例如：

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

这是代码：

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

伟大的组件，您可以引用它来构建您的自定义组件。

Demo