我想根据用户在键盘上键入的字符来突出显示/跳转到该选项。默认情况下,它只需要第一个字符。但我希望,如果用户键入3-4个字符,那么它应该跳转到以那些键入的3-4个字符开始的选项。例如,在mat-select中有数千个mat-option,当用户键入"flo“时,突出显示应跳到以"flo”开头的第一个选项
<h4>mat-select</h4>
<mat-form-field appearance="fill">
  <mat-label>State</mat-label>
  <mat-select>
    <mat-option>None</mat-option>
    <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
  </mat-select>
</mat-form-field>ts文件代码
import {Component} from '@angular/core';
/** @title Select with reset option */
@Component({
  selector: 'select-reset-example',
  templateUrl: 'select-reset-example.html',
})
export class SelectResetExample {
  states: string[] = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
    'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
    'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
    'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
    'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
    'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];
}Current Behaviour =>如果用户输入"flo“,它会先跳转到以"f”开头的选项,然后是"l“,最后突出显示/focus第一个以"o”开头的选项。
预期行为=>如果用户键入"flo“,则应跳转/突出显示以"flo”开头的第一个选项
试用过的示例keydown="$event.stopPorpogation"
实现预期行为的任何解决方案
发布于 2021-09-13 22:09:36
typeaheadDebounceInterval="500" or typeaheadDebounceInterval="1000"将上面的属性添加到mat-select中,然后它就可以工作了
https://stackoverflow.com/questions/69169596
复制相似问题