Angular ul、cdk-virtual-scroll-viewport 列表、键盘选择

Question

尝试创建自动完成组件功能。

当用户开始输入时，会弹出一个小窗口，其中包含可供选择的选项。 我希望用户能够使用他的键盘选择一个选项。

示例： - 用户输入“侯” - 选项显示 ["House", "Houston"] - 用户点击down键盘键并点击enter来选择“house”

我的弹出滚动组件：

<ul class="plDropdown-optionList">
          <cdk-virtual-scroll-viewport style="height: 200px" itemSize="30">
            <ng-container *cdkVirtualFor="let option of displayableOptions">
              <button class="plDropdown-option" type="button" (click)="selectOption(option)">
                {{option}}
              </button>
            </ng-container>
          </cdk-virtual-scroll-viewport>
        </ul>

Answer 1

为任何寻找此问题的人发布解决方案选项。

我使用了来自 Input 标签的键盘事件：

<input (keydown)="processInput($event)">

然后找到被按下的：

processInput(evt: KeyboardEvent): void

保留选定的参考并更新它：

private _updateIndex(key: string): void {
    switch (key) {
      case Key.ArrowUp:
        if (this.selectedIndex === 0) {
          return;
        }

        this._setIndex(this.selectedIndex -= 1);
        break;

      case Key.ArrowDown:
        this.displayedTags$
        .pipe(
          take(1)
        )
          .subscribe((results) => {
            if (this.selectedIndex >= results.length - 1) {
              this._setIndex(results.length - 1);

              return;
            }

            this._setIndex(this.selectedIndex += 1);
          });
        break;

      default:
        break;
    }
  }

  private _selectIndex(): void {
    this.displayedTags$.pipe(
      take(1)
    )
    .subscribe((results) => {
      const result = results[this.selectedIndex];

      if (result) {
        this.selectResult(result);
      }
    });
  }

  private _setIndex(index: number): void {
    this.selectedIndex = index;
  }

在 HTML 文件中，使用此行突出显示当前行：

[ngClass]="{'focus-background': selectedIndex == idx}"

看起来像这样：

 <cdk-virtual-scroll-viewport style="height: 400px" itemSize="30">
            <ng-container *cdkVirtualFor="let option of displayedTags$ | async; index as idx" (isSelected)="true">
              <button class="plTagsComponent-option" type="button" (click)="selectResult(option)" (isSelected)="true"
                [ngClass]="{'focus-background': selectedIndex == idx}" (mouseenter)="onHover(idx) ">
                {{option.label}}
              </button>
            </ng-container>
          </cdk-virtual-scroll-viewport>