Question

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

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

示例： -用户键入“侯” -选项显示[“房屋”，“休斯顿”] -用户按下下键盘键，然后按下输入以选择“房屋”

我的弹出滚动组件：

#!/usr/bin/env node
const program = require("commander");
const firebase = require("firebase");
firebase.initializeApp(
    {
        apiKey: "*****************************",
        authDomain: "*********.firebaseapp.com",
        databaseURL: "https://*************.com",
        projectId: "*******",
        storageBucket: "**********.com",
        messagingSenderId: "*************"
    }
);
program
    .command('next')
    .alias('c')
    .description('Go to next slide')
    .action(async () => {
        let uid = "p4AtnYZubUQ4svbhWXiQXVPMpY43";
        await firebase.database().ref(`/${uid}/controls`)
            .push({ type: "nextSlide" })
    })
program.parse(process.argv);

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>

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

1 个答案: