Question

在Angular项目中，我正在使用material-autocomplete来搜索我的一些项目。到目前为止，它可以按预期运行。

HTML

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

TS

myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
   if(filterValue == ''){
      return []
    }
    return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
  }

此功能有效，但仅适用于搜索中的第一个单词。例如，如果要搜索“香蕉苹果”，则在键入“ B”时将自动完成，但在键入“ Apple”时则不会自动完成。有没有一种方法可以应用此搜索，以便您可以在多词项目中搜索任一词？

Answer 1

您应该更改_filter方法的最后一行：

!python -m pip install "dask[complete]"

这使您可以过滤查找到的所有选项值。

角材料自动完成功能，可搜索多个单词？

1 个答案: