Угловой ul, cdk-virtual-scroll-viewport list, выбор клавиатуры - PullRequest
Новая
       12

Угловой ul, cdk-virtual-scroll-viewport list, выбор клавиатуры

0 голосов
/ 18 февраля 2019

Попытка создать функциональность компонента Автозаполнение .

Когда пользователь начинает печатать, появляется маленькое окно с вариантами выбора.Я бы хотел, чтобы пользователь мог выбрать вариант с помощью своей клавиатуры.

Пример: - Пользователь, набрав "Hou" - Параметры показывают ["Дом", "Хьюстон"] - Пользователь нажимает вниз клавиша клавиатуры и нажатия введите , чтобы выбрать "дом"

Мой компонент прокрутки всплывающего окна: 

<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>

1 Ответ

0 голосов
/ 18 февраля 2019

Публикация опции решения для тех, кто ищет это.

Я использовал событие клавиатуры из Ввод тег: 

<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>
...