时间戳

首页 > 解决方案 > 用户类型 3-4 字符的 Mat-Select Angular 选项过滤器

angular - 用户类型 3-4 字符的 Mat-Select Angular 选项过滤器

问题描述

我想根据键盘上的用户类型字符突出显示/跳转到选项。默认情况下，它只需要第一个字符。但我希望如果用户输入 3-4 个字符，那么它应该跳转到以输入的 3-4 个字符开头的选项。EG 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'
  ];
}

当前行为 => 如果用户键入“flo”，则它首先跳转以“f”开头的选项，然后以“l”开头，最后突出显示/聚焦以“o”开头的第一个选项。

预期行为 => 如果用户键入“flo”，那么它应该跳转/突出显示以“flo”开头的第一个选项

尝试过的例子 keydown="$event.stopPorpogation"

实现预期行为的任何解决方案

标签： angularmat-select

解决方案

typeaheadDebounceInterval="500" or typeaheadDebounceInterval="1000"

将上述属性添加到 mat-select 然后它的工作原理

推荐阅读