相关疑难解决方法(0)

mat-autocomplete过滤器以高亮显示部分字符串匹配

我正在尝试使用mat-autocomplete类似于以下示例的过滤器;

贸易输入示例

所以我试图实现这个功能,这样当用户开始输入交易时,他们正在寻找基于字符串中任何地方的部分字符串匹配的过滤器,并在选项中突出显示.

cheackatrade截图

我目前在我的.html中

<mat-form-field class="form-group special-input">
            <input type="text" placeholder="Select a trade" aria-label="Select a trade" matInput [formControl]="categoriesCtrl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" md-menu-class="autocomplete">
                <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                    {{ option.name }} 
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
Run Code Online (Sandbox Code Playgroud)

我的.ts在哪里

categoriesCtrl: FormControl;

filteredOptions: Observable<ICategory[]>;
options: ICategory[];

categorySubscription: Subscription;

constructor(fb: FormBuilder, private router: Router, private service: SearchService, private http: Http) {

    this.categoriesCtrl = new FormControl();
}

ngOnInit() {

this.categorySubscription = this.service.getCategories().subscribe((categories: ICategory[]) => {

    this.options = categories;

    this.filteredOptions = this.categoriesCtrl.valueChanges
        .pipe(
        startWith(''),
        map(options …
Run Code Online (Sandbox Code Playgroud)

typescript angular-material angular

11
推荐指数
1
解决办法
3902
查看次数

标签 统计

angular ×1

angular-material ×1

typescript ×1