Angular Material：md-autocomplete - 如何在 Enter 事件上隐藏 md-autocomplete-suggestions

typescript

使用Angular Material的md-autocomplete组件时，有时我们希望在用户按下Enter键时隐藏自动完成建议列表。然而，md-autocomplete并没有提供直接的方法来实现这一点。在本文中，我们将展示如何通过编写自定义指令来实现此功能，并将其应用于md-autocomplete组件。

自定义指令实现隐藏md-autocomplete建议列表

要实现隐藏md-autocomplete建议列表的功能，我们需要创建一个指令。该指令将监视输入框的键盘事件，并在用户按下Enter键时隐藏建议列表。

首先，我们需要创建一个新的Angular指令。在指令中，我们将使用ElementRef来获取md-autocomplete元素和输入框元素的引用，以便我们可以访问它们的属性和方法。

typescript
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[hideAutocompleteOnEnter]'
})
export class HideAutocompleteOnEnterDirective {
  constructor(private el: ElementRef) { }
  @HostListener('keydown.enter')
  onEnter() {
    const mdAutocomplete = this.el.nativeElement.querySelector('md-autocomplete');
    mdAutocomplete._setPanelVisible(false);
  }
}

在指令中，我们创建了一个名为hideAutocompleteOnEnter的选择器，并使用HostListener装饰器将onEnter方法绑定到键盘的Enter事件上。在onEnter方法中，我们通过查询md-autocomplete元素，然后调用_setPanelVisible方法并将其参数设置为false来隐藏建议列表。

接下来，我们需要将指令应用于md-autocomplete组件。我们可以在模板中的md-autocomplete元素上添加一个属性，以将指令绑定到该元素上。

html
<md-autocomplete hideAutocompleteOnEnter>
  <!-- 输入框和建议列表内容 -->
</md-autocomplete>

在这个示例中，我们将hideAutocompleteOnEnter指令应用于md-autocomplete元素。当用户按下Enter键时，建议列表将被隐藏。

案例代码

下面是一个完整的案例代码，演示了如何使用自定义指令隐藏md-autocomplete建议列表。

app.module.ts：

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { AppComponent } from './app.component';
import { HideAutocompleteOnEnterDirective } from './hide-autocomplete-on-enter.directive';
@NgModule({
  declarations: [
    AppComponent,
    HideAutocompleteOnEnterDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatAutocompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html：

html
<md-autocomplete hideAutocompleteOnEnter>
  <input type="text" mdInput [(ngModel)]="selectedItem" [mdAutocomplete]="auto" (input)="filterItems($event.target.value)">
  <md-autocomplete-panel #auto>
    <md-option *ngFor="let item of filteredItems" [value]="item">
      {{ item }}
    </md-option>
  </md-autocomplete-panel>
</md-autocomplete>

app.component.ts：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.CSS']
})
export class AppComponent {
  selectedItem: string;
  items: string[] = ['Apple', 'Banana', 'Cherry', 'Durian'];
  filteredItems: string[] = [];
  filterItems(value: string) {
    this.filteredItems = this.items.filter(item => item.toLowerCase().includes(value.toLowerCase()));
  }
}

在这个示例中，我们创建了一个md-autocomplete组件，其中包含一个输入框和一个建议列表。我们使用hideAutocompleteOnEnter指令将隐藏建议列表的功能应用于md-autocomplete元素。每当用户在输入框中输入字符时，建议列表将显示与输入匹配的项目。当用户按下Enter键时，建议列表将隐藏。

通过编写自定义指令，我们可以实现在Enter事件上隐藏md-autocomplete建议列表的功能。这为用户提供了更好的体验，同时也增加了我们的应用程序的交互性。