Угловой материал Автозаполнение Игнорировать Первое слово - PullRequest
Новая
       5

Угловой материал Автозаполнение Игнорировать Первое слово

0 голосов
/ 29 апреля 2019

Я создаю простой пользовательский интерфейс конструктора запросов в Angular Material, где у меня есть один матовый ввод, где пользователь может вводить свой запрос. Как часть этого, я хочу иметь возможность предоставлять автозаполнение, однако я хочу иметь несколько экземпляров этого запуска на входе. Каждый запрос начинается со слова «от», а затем за ним следует имя таблицы, в которой я хочу начать автозаполнение первым. После имени таблицы пользователь может выбрать отдельные поля таблицы, где я также хочу предоставить автозаполнение. В принципе, есть ли способ использовать угловой фильтр с автозаполнением, чтобы отображать автозаполнение после определенных ключевых слов?

Пример: 

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>
...