Автозаполнение углового материала: на фокусе держите панель предложений закрытой - PullRequest
Новая
       29

Автозаполнение углового материала: на фокусе держите панель предложений закрытой

0 голосов
/ 13 июня 2019

Я использую угловой материал 7.3.7, и у меня есть простое подобие автозаполнения, как в документации : 

<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 #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Есть ли способ сохранить панель предложений закрытой, когдаввод фокусируется?

Я уже искал через API, но ничего полезного не нашел.

Заранее спасибо!

1 Ответ

1 голос
/ 13 июня 2019

это немного хакерское решение, но вы можете использовать метод closePanel MatAutocompleteTrigger следующим образом 

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #inp="matAutocompleteTrigger"
           (focus)="inputFocused(inp)"
           type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput [formControl]="myControl"
           [matAutocomplete]="auto"
    />
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

, а затем добавить следующий метод в ваш файл 

focused(trg: MatAutocompleteTrigger) {
  setTimeout(() => {
    trg.closePanel();
  });
}

используя settimeout, мы ожидаем следующего цикла обнаружения изменений, чтобы панель открылась, а затем мы ее закрыли.в результате панель открывается и закрывается за пару миллисекунд.

надеюсь, это поможет:)

=== не взломанное решение ====

я проверил свойреализации автозаполнения, и в одной из них, где у нас есть большое количество опций, мы использовали два массива опций: один - allOptions, другой - filteredOptions.FilterOptions изначально пуст, и я показываю только фильтрованные опции в шаблоне.Поэтому, если пользователь не введет что-то для ввода, ничего не отобразится (на самом деле я ввожу по крайней мере два символа для начала фильтрации, поскольку у allOptions есть пара тысяч параметров). 

<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 #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

в моем файле ts; 

allOptions: string[] = this.dataService.userOptions; // there are thousands of options
filteredOptions: string[] = [];

ngOnInit() {
  this.myControl.valueChanges.subscribe(z => {
    if (!z || z.length < 2) {
      this.filteredOptions = [];
    } else {
      this.filteredOptions = this.allOptions.filter(el => el.toLowerCase().indexOf(z.toLowerCase()) >= 0);
    }
}

Я надеюсь, это поможет больше:)

...