Question

我有一个简单的自动完成输入

<input [matAutocomplete]="auto" (focusout)="save()">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

我想在用户不再使用输入字段时保存输入值

问题是，当我单击自动完成选项时，将调用输入字段的聚焦功能。

保存输入值以检查自动完成和输入字段状态的我有哪些选择

谢谢

Answer 1

如果您只想处理自动完成选项的单击，则应在该选项上使用(click)来处理它。

<input [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option (click)="save(number)" *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

但是，如果您想重点关注，这将起作用：

<input #myInput (focusout)="save(myInput.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

Stackblitz

Answer 2

是的，我们有办法做到这一点，

<input [matAutocomplete]="auto" matInput (focusout)="onFocusOut()" [formControl]="autoInput">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let number of numbers" [value]="number">
      {{number}}
  </mat-option>
</mat-autocomplete>

这是代码，我添加了一个 formControl 来将 autoComplete 值绑定到一个变量。方法是这样的，我们可以在matInput被聚焦后访问matInput的值，然后我们可以执行一些操作，比如自动选择一个值或过滤选项等来操作自动完成输入值。

// since focusout will be called after optionSelected event called of 
// matAutoComplete, we are adding timeOut to delay focusOut operations
// and so we will have the true value of autoInput

onFocusOut() {
  setTimeout(() => {
    let input = this.autoInput.value;
    // filtering matching values from options and 
    // selecting first matched or set the default value
    let matchingOption = this._filter(input)[0] || 'DEFAULT VALUE';
    // now set the best matching option 
    // or let's call it autoSelects best match option for an user
    this.autoInput.setValue(matchingOption);
  }, 300);
}

通过这种方式，我们将能够在 matInput 集中处理自动完成输入值。

谢谢。

使用角度垫自动完成功能保存（对焦）

2 个答案: