尝试创建一个自动完成组件功能。
当用户开始输入时,会弹出一个小窗口,其中包含可供选择的选项。 我希望用户能够使用他的键盘选择一个选项。
例子: - 用户输入“Hou” - 选项显示 ["House", "Houston"] - 用户点击向下键盘键并点击enter选择“房子”
我的弹出滚动组件:
<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>
最佳答案
为任何寻找此问题的人发布解决方案选项。
我使用了来自 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>
关于javascript - Angular ul,cdk-virtual-scroll-viewport 列表,键盘选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54743584/