首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Mat-选择用户类型为3-4个字符的角度选项过滤器

Mat-选择用户类型为3-4个字符的角度选项过滤器
EN

Stack Overflow用户
提问于 2021-09-13 22:03:59
回答 1查看 33关注 0票数 0

我想根据用户在键盘上键入的字符来突出显示/跳转到该选项。默认情况下,它只需要第一个字符。但我希望,如果用户键入3-4个字符,那么它应该跳转到以那些键入的3-4个字符开始的选项。例如,在mat-select中有数千个mat-option,当用户键入"flo“时,突出显示应跳到以"flo”开头的第一个选项

代码语言:javascript
运行
复制
<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文件代码

代码语言:javascript
运行
复制
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"

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

EN

回答 1

Stack Overflow用户

发布于 2021-09-13 22:09:36

代码语言:javascript
运行
复制
typeaheadDebounceInterval="500" or typeaheadDebounceInterval="1000"

将上面的属性添加到mat-select中,然后它就可以工作了

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69169596

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档