Добавление функции поиска в mat-множественный выбор в угловом материале - PullRequest
Новая
       8

Добавление функции поиска в mat-множественный выбор в угловом материале

0 голосов
/ 07 ноября 2019

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

Ответы [ 3 ]

2 голосов
/ 07 ноября 2019

Попробуйте этот пример в stackblitz

stackblitz пример с угловым 8

в вашем HTML-файле 

 <h2>Multiple selection</h2>
  <p>
    <mat-form-field>
      <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true">
        <mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search>
        <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
          {{bank.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </p>
  <p>
    Selected Banks: 
  </p>
  <ul *ngFor="let bank of bankMultiCtrl?.value">
    <li>{{bank.name}}</li>
  </ul>
1 голос
/ 07 ноября 2019

Проблема в том, что выбранный материал не имеет функциональных возможностей для ввода. Поэтому вам нужно сделать немного CSS, чтобы он выглядел хорошо. 

<mat-select multiple>

  <mat-form-field>
    <input matInput placeholer="Search" (input)="filterOptione($event.target.value)" />
  </mat-form-field>

  <mat-option *ngFor="let option of options" [value]="option">
    {{option}}
  </mat-option>


</mat-select>

Функция фильтра: 

public filterOptions(filter: string): void {
 this.options = this._unfilteredOptions.filter(x => x.toLowerCase().includes(filter.toLowerCase()));
}
0 голосов
/ 07 ноября 2019

Вместо использования выбора матов используйте автозаполнение матов. https://material.angular.io/components/autocomplete/overview

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

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

Надеюсь, это поможет.

Редактировать:

Я должен добавить, что используюсписок мат-чипов (https://material.angular.io/components/chips/overview) для нескольких элементов уравнения, выбранных при множественном выборе. Когда выбран вариант, добавьте его в список чипов, и вы можете добавить значки X для каждого чипа, чтобы удалить объекты изlist.

Конечно, это мой личный вкус многократного выбора, но я подумал, что он может дать вам некоторые идеи.

...