输入位置更改时更改垫自动完成位置

时间:2019-05-20 13:27:36

标签: angular angular-material-5

我使用的是mat-autocomplete(角度材料v.5.2.5),当输入位置移动时(因为文本已添加到父div中),自动完成下拉列表的位置不会更改。

我尝试使用cdkScrollable,并尝试将输入元素更改为文本区域。

<mat-form-field>
  <mat-chip-list #chipList class="autocomplete-form-field-list">
    <div class="list-wrapper" cdkScrollable>
      <input
        matInput
        [matChipInputFor]="chipList"
        #autoCompleteInput
        [matAutocomplete]="auto"
        [ngStyle]="{'max-width': autoCompleteInput.value.length + 1+ 'ch'}"
        class="autocompleteInput"
        type="text"
        [placeholder]="placeholder"
        [id]="id"
        [value]="value"
        [formControl]="searchTerm"
        (keyup)="onKeyUp($event)"
        [ngClass]="{'validation-error-border': patternError}"
        (click)='openPanel($event)'>
      <i *ngIf="value" class="o_search_no_color_icon autocomplete-cross-search"></i>
    </div>

    <mat-autocomplete #auto="matAutocomplete" #autocomplete>
      <mat-option *ngFor="let item of searchResult" [disabled]="item.isCategory && isTopicSearch" [value]="item"
          [title]="item.displayName" (onSelectionChange)="onSelect(item)">
        <my-checkbox
          *ngIf="item.isCategory"
            class="catagoryName"
          [id]="item.displayName"
          [displayName]="item.displayName"
          (onSingleCheckBoxChange)="nodeClicked($event)"
          [checked]="isChecked(item.displayName)">
        </my-checkbox>
        <my-checkbox
          *ngIf="!item.isCategory"
          class="catagoryItem"
          [id]="item.displayName"
          [displayName]="item.displayName"
          (onSingleCheckBoxChange)="nodeClicked($event)"
          [checked]="isChecked(item.displayName)">
        </my-checkbox>
      </mat-option>
      <mat-option *ngIf="searchResult.length == 0 && searchTerm.value">
        <span>No matches found for {{currValue}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-chip-list>
</mat-form-field>

我正在寻找的预期行为是始终在输入下方包含自动完成下拉列表。

0 个答案:

没有答案