Question

我开始在我的一个项目中使用Material。查看文档网站<mat-autocomplete>的示例...

<mat-form-field class="example-full-width">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <span>{{state.name}}</span> |
  </mat-option>
</mat-autocomplete>

ts：

    export class AutocompleteOverviewExample {        
      stateCtrl = new FormControl();
      filteredStates: Observable<State[]>; 
      states: State[] = [
            { name: 'Arkansas'  },
            ...
            { name: 'Texas' }
          ];

          constructor() {
            this.filteredStates = this.stateCtrl.valueChanges
              .pipe(
                startWith(''),
                map(state => state ? this._filterStates(state) : this.states.slice())
              );
          }

          private _filterStates(value: string): State[] {
            const filterValue = value.toLowerCase();
            return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);

            // Material example, its basically a ._http.get(value).map
          }
        }

当您在输入字段中单击时，<mat-option>会列出其已部署。我想避免这种情况，只显示X时的选项（它们写了3个或更多字符，它是一个包含5或10个元素的“小”列表，等等）。

如何修改这种行为并动态地进行？

Answer 1

这是库中的默认行为。要对其进行自定义，您只需在更改自动完成的模型值时用CSS隐藏自动完成选项，然后设置要在输入文本上具有的最小长度，然后相应地显示自动完成选项即可。将查看代码更新为：

<mat-form-field class="example-full-width">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl" 
  (ngModelChange)="updatedVal($event)">
  <mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let state of filteredStates | async" [value]="state.name" 
    [ngClass]="{'hide-autocomplete': !showAutocomplete}">
   <span>{{state.name}}</span> |
   </mat-option>
  </mat-autocomplete>
</mat-form-field>

在这里，我在输入字段上添加了ngModelChange来检查模型更改。在mat选项上，我添加了ngClass。哪里

.hide-autocomplete { display: none; }

在类中，updatedVal方法为：

updatedVal(e) {
  if(e && e.length >= 3) {
     this.showAutocomplete = true;
  } else {
     this.showAutocomplete = false;
  }
}

因此，仅当输入长度小于3时，hide类才会添加到mat-option中。

Demo Example

清空时避免使用Angular Material Autocomplete显示垫选项

1 个答案: