mat-autocomplete 仅在搜索文本中显示列表
mat-autocomplete show the list only on search text
我正在构建一个应用程序并且我有 mat-autocomplete。我只想在输入文本字段中输入特定文本时显示搜索列表。我尝试了某些方法但没有成功
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
您必须在 component.ts.then 中创建函数才能正常工作。分别按照以下步骤操作。
HTML 组件
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
在您的构造函数中插入以下代码。
this.filteredOptions = this.myControl?.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
创建一个名为 _filter 的方法来获取所有自动完成值。
_filter(value: any): any[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
}
重要 - 确保 this.options 表示所有受让人
我正在构建一个应用程序并且我有 mat-autocomplete。我只想在输入文本字段中输入特定文本时显示搜索列表。我尝试了某些方法但没有成功
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
您必须在 component.ts.then 中创建函数才能正常工作。分别按照以下步骤操作。
HTML 组件
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
在您的构造函数中插入以下代码。
this.filteredOptions = this.myControl?.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
创建一个名为 _filter 的方法来获取所有自动完成值。
_filter(value: any): any[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
}
重要 - 确保 this.options 表示所有受让人