Question

我正在Angular Material中构建一个简单的查询构建器UI，其中有一个单一的Mat输入，用户可以在其中输入查询内容。作为此过程的一部分，我希望能够提供自动完成功能，但是，我希望在输入上运行此实例的多个实例。每个查询均以单词“ from”开头，然后紧跟一个表名，在该表中我要第一个自动完成功能开始。在表名之后，用户可以选择表的各个字段，这也是我希望能够提供自动完成功能的位置。基本上，有没有一种方法可以使用具有自动完成功能的Angular过滤器，以便能够在某些关键字之后显示自动完成功能？

示例：

from myTable select field1, field2

在上面的示例中，“ myTable”将具有自动完成功能，因为它位于“ from”之后。 “ field1”和“ field2”也将具有，因为它们位于逗号或关键字select之后。在Angular中可能吗？我浏览了这些示例，找不到任何复杂或动态的示例：https://material.angular.io/components/autocomplete/api

这是我目前的尝试，我曾经尝试过使用skip（5）或startwith（'from'）都没有运气，有人曾经尝试过这种方法吗？

export class SearchNewComponent implements OnInit {
   firstFormGroup: FormGroup;   
   secondFormGroup: FormGroup;   
   priorityCtrl: FormControl = new FormControl();  
   priorities: string[] =['tabl1', 'table2', 'table3'];   
   filteredOptions: Observable<string[]>;

constructor(private formBuilder: FormBuilder) {   }

ngOnInit() {
    this.firstFormGroup = this.formBuilder.group({
      priorityCtrl: ['', Validators.required],
    });

    this.filteredOptions = this.priorityCtrl.valueChanges
      .pipe(
        startWith(''),
        map(val => val.length >= 2 ? this.filter(val) : [])
      );
  }

  filter(val: string): string[] {
    return this.priorities.filter(option =>
      option.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }
}

HTML：

<mat-form-field class="example-full-width" style="width: 95%;">
    <input type="text" placeholder="from table1..." matInput [formControl]="priorityCtrl"
      [matAutocomplete]="auto">
    <mat-icon matSuffix>search</mat-icon>
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

角材料自动完成忽略第一个单词

0 个答案: