如何使用自定義搜索字段上的向下箭頭鍵將焦點移至列表項？

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

很棒的組件，您可以參考它來構建您的自定義組件。

演示