Question

我实现了自动完成功能，该自动完成功能可以接收建议并按Enter键选择建议。但是，单击选项时，选项会消失而不进行选择。

我尝试将（click）和其他绑定添加到选项，但是也没有调用这些方法。有谁知道原因是使用Enter进行选择而单击无效。

  <mat-form-field class="name" appearance="outline">
<input (change)="competenceChange()" placeholder="Competence name" matInput [(ngModel)]="competencePart.name"
  (ngModelChange)="this.competenceNameUpdate.next($event)" autocomplete="off" [matAutocomplete]="autoComplete">

<mat-autocomplete autoActiveFirstOption #autoComplete="matAutocomplete">
  <mat-option *ngFor="let proposal of competenceProposals" [value]="proposal">
    {{ proposal }}
  </mat-option>
</mat-autocomplete>

  ngOnInit(): void {
// Use the set debounce time to delay the execution of the search query.
// Every keypress resets the delay timer.
this.competenceNameUpdate.pipe(
  debounceTime(this.textboxInputDebounceTimeMS),
  distinctUntilChanged())
  .subscribe(value => {
    this.obtainAutocompleteProposals(value);
  });


  private obtainAutocompleteProposals(value: string): void {
if (this.competencePart.name.trim() === '') { this.competenceProposals = []; return; }
this.competenceService.GetCompletionProposals(
  this.competencePart.type.valueOf(),
  value,
  response => {
    this.competenceProposals = response.completionProposals;
  },
  failure => {
    console.error(failure);
  });

重要的是，实现必须支持此处使用的回调实现，因为这是我们的服务生成方式。

Answer 1

您可以在此StackBlitz Link

中找到完整的示例

在模板文件中进行这样的输入...

functools.wraps()

您的自动完成功能是..

<input matInput placeholder="Select State" aria-label="State" 
                    [matAutocomplete]="auto" [formControl]="stateCtrl" (click)="getStates()">

通过单击选择材料自动完成

1 个答案: