Angular 如何在Mat Select中实现搜索功能
我有一个下拉列表,我想我在那里添加一个搜索选项,在我的情况下,当用户添加3个第一个字母时,该选项将搜索行业名称。 这是我的下拉列表:Angular 如何在Mat Select中实现搜索功能,angular,Angular,我有一个下拉列表,我想我在那里添加一个搜索选项,在我的情况下,当用户添加3个第一个字母时,该选项将搜索行业名称。 这是我的下拉列表: <div class="field-wrapper"> <div class="question-wrapper"> <h3 class="mat-subheading-1"> What is the main industry where your company is active? </h3
<div class="field-wrapper">
<div class="question-wrapper">
<h3 class="mat-subheading-1">
What is the main industry where
your company is active?
</h3>
</div>
<div class="field-box">
<mat-form-field formGroupName="industry">
<mat-select formControlName="id" placeholder="Industry" (selectionChange)="changed($event)">
<mat-option>None</mat-option>
<mat-option *ngFor="let item of industries" [value]="item.id">
{{item.name}}
</mat-option>
</mat-select>
<div
*ngIf="industryForm.controls.id.invalid && (industryForm.controls.id.dirty || industryForm.controls.id.touched)"
class="alert alert-danger">
<mat-error *ngIf="industryForm.controls.id.errors.required">Must fill this field</mat-error>
</div>
</mat-form-field>
</div>
结果:如果用户编写了Edu,将显示教育
请告诉我,如果有人有什么想法的话,这对我真的很有帮助
我想做的只是稍微编辑一下,我想让搜索在用户写3封信时起作用您可以使用ngx mat select SEARCH软件包实现相同的功能:
首次安装:
npm install ngx-mat-select-search
在app.module.ts中:
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
在导入数组中:
imports: [
....,
NgxMatSelectSearchModule
]
HTML代码:
<mat-form-field>
<mat-select [formControl]="control" ngDefaultControl placeholder="Tags" #Select>
<ngx-mat-select-search [placeholderLabel]="'Search Item'" [noEntriesFoundLabel]="'No matching records found'" [formControl]="control"
ngDefaultControl></ngx-mat-select-search>
<mat-option class="m-t" *ngFor="let obj of filteredRecords | async" [value]="obj">
{{obj}}
</mat-option>
</mat-select>
</mat-form-field>
TS代码:
import { takeUntil, take } from 'rxjs/operators';
import { FormGroup, FormControl, Validators } from '@angular/forms'
import { Subject, ReplaySubject } from 'rxjs/Rx';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
import { MatSelect } from '@angular/material/select';
@Component({
selector: 'select-overview-example',
templateUrl: 'select-overview-example.html',
styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample implements OnInit {
items: any[] = [
"Agriculture and Mining",
"Business Services"
, "Computer and Electronics"
, "Consumer Services"
, "Education"
, "Energy and Utilities"
, "Financial Services"
, "Government"
, "Health, Pharmaceuticals, and Biotech"
];
/** control for the selected bank for multi-selection */
public control: FormControl = new FormControl();
private _onDestroy = new Subject<void>();
public filteredRecords: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
@ViewChild('Select') select: MatSelect;
ngOnInit() {
this.setInitialValue();
// set initial selection
this.control.setValue([]);
// load the initial bank list
this.filteredRecords.next(this.items.slice());
this.control.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterBanksMulti();
});
}
private setInitialValue() {
this.filteredRecords
.pipe(take(1), takeUntil(this._onDestroy))
.subscribe(() => {
this.select.compareWith = (a: any, b: any) => a === b;
});
}
private filterBanksMulti() {
if (!this.items) {
return;
}
// get the search keyword
let search = this.control.value;
if (!search) {
this.filteredRecords.next(this.items.slice());
return;
} else {
search = search.toLowerCase();
}
if (search.length >= 3) {
// filter the banks
this.filteredRecords.next(
this.items.filter(item => item.toLowerCase().indexOf(search) > -1)
);
}
}
}
你能分享stackblitz吗?>是的,请给我一分钟时间,我只是在那里分享代码,但我以前没有使用stackblitz,而且我遇到了一些错误,希望这不会是一个问题。尝试这个很困难:我已经尝试过了,但无法在@PrashantPimpaleYup!这就是为什么我说你必须做很多事情才能做到这一点!但这并不困难!一步一步走