Mat-Select Angular option filter для типа пользователя 3-4 символа
Я хочу выделить / перейти к опции на основе символа пользовательского ввода на клавиатуре. По умолчанию требуется только первый символ. но я хочу, чтобы, если пользователь вводит 3-4 символа, он должен перейти к опции, начиная с набранных 3-4 символа. Например, в mat-select есть тысячи вариантов mat, и когда пользователь вводит «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'
];
}
Текущее поведение => если пользователь набирает «flo», то сначала он перескакивает с опцией, начинающейся с «f», затем с «l», и, наконец, он выделяет / фокусирует первую опцию, начинающуюся с «o».
Ожидаемое поведение => если пользователь вводит «flo», он должен перейти / выделить первый вариант, начинающийся с «flo».
Пробные примеры
keydown="$event.stopPorpogation"
Любое решение для достижения ожидаемого поведения
1 ответ
typeaheadDebounceInterval="500" or typeaheadDebounceInterval="1000"
добавил указанный выше атрибут в mat-select, а затем он работает