mat-autocomplete 过滤器以突出显示部分字符串匹配 [英] mat-autocomplete filter to hightlight partial string matches
问题描述
我正在尝试使用类似于以下示例的 mat-autocomplete
实现过滤器;
我目前在我的 .html 中有
<input type="text" placeholder="选择一笔交易" aria-label="选择一笔交易" 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>
我的 .ts 在哪里
categoriesCtrl: FormControl;过滤选项:可观察的<ICategory[]>;选项:ICategory[];categorySubscription:订阅;构造函数(fb:FormBuilder,私有路由器:路由器,私有服务:SearchService,私有http:Http){this.categoriesCtrl = new FormControl();}ngOnInit() {this.categorySubscription = this.service.getCategories().subscribe((categories: ICategory[]) => {this.options = 类别;this.filteredOptions = this.categoriesCtrl.valueChanges.管道(从...开始(''),地图(选项 => 选项? this.filter(选项):this.options.slice()));});}ngOnDestroy() {this.categorySubscription.unsubscribe();}过滤器(值:字符串):ICategory[] {返回 this.options.filter(x =>x.name.toUpperCase().indexOf(val.toUpperCase()) !== -1);}
ICategory
是一个基本的界面.
导出接口ICategory {值:数量;名称:字符串;}
服务 getCategories() 只是从 api 返回所有类别.
代码当前正在运行并按照此示例构建;
Angular Material mat-autocomplete 示例
我想在选项字符串中添加突出显示术语的效果?这可能吗?
每当用户在过滤器中输入内容时,您都可以使用自定义管道突出显示部分匹配.
@Pipe({ name: 'highlight' })导出类 HighlightPipe 实现 PipeTransform {变换(文本:字符串,搜索):字符串{const 模式 = 搜索.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&").分裂(' ').filter(t => t.length > 0).join('|');const regex = new RegExp(pattern, 'gi');返回搜索?text.replace(regex, match => `<b>${match}</b>`) : text;}}
<小时>
I am trying to achieve a filter with mat-autocomplete
that is similar to the following example;
So I am trying to achieve the functionality so that when a user begins to type in the trade they are looking for filters based on a partial string match anywhere in the string and highlight this in the option.
I current have in my .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>
where my .ts is
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 => options ? this.filter(options) : this.options.slice())
);
});
}
ngOnDestroy() {
this.categorySubscription.unsubscribe();
}
filter(val: string): ICategory[] {
return this.options.filter(x =>
x.name.toUpperCase().indexOf(val.toUpperCase()) !== -1);
}
ICategory
is a basic interface.
export interface ICategory {
value: number;
name: string;
}
And the service getCategories() just returns all the categories from an api.
The code is currently working and built per this example;
Angular Material mat-autocomplete example
I would like to add the effect of highlighting the term in the option string? Is this possible at all?
You can use a custom pipe to highlight the partial match whenever the user types in something in the filter.
@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
transform(text: string, search): string {
const pattern = search
.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")
.split(' ')
.filter(t => t.length > 0)
.join('|');
const regex = new RegExp(pattern, 'gi');
return search ? text.replace(regex, match => `<b>${match}</b>`) : text;
}
}
这篇关于mat-autocomplete 过滤器以突出显示部分字符串匹配的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!