如何在角度5中启用下拉菜单时使用自动完成功能？

Question

我有一个下拉列表中显示的数据列表。下拉的html：

<div class="col-md-6">
  <mat-form-field>
    <mat-select placeholder=" oraganization " formControlName="organization">
      <mat-option>None</mat-option>
      <mat-option *ngFor="let org of orgList" [value]="org.id"> {{ org.name  }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

，orglist中的数据为： 我也尝试过使用ngAutoComplete，primeFace AutoComplete和Material AutoComplete，但是我无法为这些数据填充数据。是否有其他方法或实际方法可以将这些自动完成与Drop-Down一起使用。

Answer 1

对于下拉式实施，您可以使用 angular material
将autocomplete组件用于ui

演示模板

  

HTML

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="search" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" (keyup)="updated()" [(ngModel)]="data">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

现在以字符串数组（在此示例为all[]）中进行搜索， 您可以使用此逻辑

我在这里使用正则表达式来匹配数组中这些字符串的任何子字符串

  

打字稿

export class AppComponent  {
  myControl = new FormControl();
  options: string[] = [];
  data : any;
  constructor() {
  }

  public updated() {
    this.options = [];
    if (this.myControl.value.length > 0) {
      let all = ['John', 'Jenny', 'Jonson']
      let searchedWord = this.myControl.value
      for(let key in all) {
        let r = all[key].search(new RegExp(searchedWord, "i"));
        if (r != -1) {
          this.options.push(all[key])
        }
      }
    } else {
      this.options = []
    }
  }
}

工作示例：stackblitz