Question

我正在尝试为用户提供一个选项，可以在位于角料2 MdAutocomplete（或MatAutocomplete）md-option内的输入中输入不同的搜索字词。

当前代码：

<md-autocomplete #auto="mdAutocomplete">
  <md-option disabled>
    <md-icon>search</md-icon>
    {{'WELCOME_WIZARD.SEARCH_FOR_A_DEV_TEAM' | translate}}
  </md-option>
  <md-option (click)="auto.showPanel">
    <span>
      <md-form-field class="p-input-full-width p-select-adjusted">
        <input mdInput
               name="searchTerm" ngModel
               [formControl]="searchTeamCtrl"
               placeholder="{{'WELCOME_WIZARD.SEARCH_START_TYPING' | translate}}"
               aria-label="state">
      </md-form-field>
    </span>
  </md-option>
  <md-option *ngFor="let team of foundTeams | async" [value]="team.name">
    <span>{{ team.name }}</span>
  </md-option>
  <md-option disabled>
    <md-icon>star</md-icon>
    {{'WELCOME_WIZARD.FAVORITES' | translate}}
  </md-option>
  <md-option *ngFor="let team of filteredTeams | async" [value]="team.name">
    <span>{{ team.name }}</span>
  </md-option>
</md-autocomplete>

问题是当用户点击带输入的选项时，自动完成功能会关闭。我已经能够通过给md-option一个disabled参数来绕过这个，但是出现了另一个问题：输入不再对空格键做出反应。

有没有人设法成功整合类似的东西，或者是否有空格键的解决方案？

Answer 1

您可以在关注输入的点击事件上调用stopPropagation()。

<mat-option>
  <input (click)="handleInputFocusClick($event)">=
</mat-option>

// ...

handleInputFocusClick(event) {
  event.stopPropagation();
}

如果您将其他事件转移到mat-option中传播给事件处理程序，则可以使用类似的策略。

https://stackblitz.com/edit/material2-beta12-jayo17?file=app/app.component.ts

MatAutocomplete或MdAutocomplete：输入内部

1 个答案: