搜索多选下拉角4和材料2

4 回答

• 0

  目前不支持此功能 . "search/filter in select"有一个开放式功能请求，"Add select header to the md-select"有另一个请求 . 但是，您可以查看this注释，其中包含一个示例，说明如果您不想等待它可以解决 .

  回复于 2024-04-26T16:53:19+08:00
• 0

  我认为创建一个答案非常简单，一个matinput有一个搜索查询，然后在列表所包含的项目的数组列表上使用基本搜索过滤器管道（我在工作，但当我回到家时，我可能写一个例子）

  回复于 2024-04-26T16:53:19+08:00
• 0

  试试这个：

  <md2-select formControlName="some_id"  [multiple]="true">
  <md2-select-header class="md2-select-header">
      <input #searchContact name="some_id" class="select-search"
             placeholder="Select Contact">
  </md2-select-header>
  <md2-option
      *ngFor="let contact of contacts | search:searchContact.value"
      [value]="contact.id">
      {{ user.address1 }}
  </md2-option>
  

  回复于 2024-04-26T16:53:19+08:00
• 0

  已在选择框内添加搜索文本框以进行过滤

  <mat-form-field>
      <mat-select (openedChange)="openedChange($event)" placeholder="selectFormControl" [formControl]="selectFormControl" multiple>
          <mat-select-trigger>
              {{selectFormControl.value ? selectFormControl.value[0] : ''}}
              <span *ngIf="selectFormControl.value?.length > 1" class="additional-selection">
          (+{{selectFormControl.value.length - 1}} {{selectFormControl.value?.length === 2 ? 'other' : 'others'}})
        </span>
      </mat-select-trigger>
      <div class="select-container">
      <mat-optgroup >
    <mat-form-field style="width:100%;">
      <input #search autocomplete="off" placeholder="Search" aria-label="Search" matInput [formControl]="searchTextboxControl">
      <button [disableRipple]="true" *ngIf="search.value" mat-button matSuffix mat-icon-button aria-label="Clear" (click)="clearSearch($event)">
      <mat-icon >close</mat-icon>
    </button>
           </mat-form-field>
      </mat-optgroup>
      <mat-optgroup *ngIf="(filteredOptions | async).length == 0">
        <div>No results found!</div>
      </mat-optgroup>
   <mat-option (optionSelectionChanges)="selectionChange($event)" *ngFor="let option of filteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
  </div>
  </mat-select>
  </mat-form-field>
  

  转到下面的链接以查看实施情况

  https://stackblitz.com/edit/angular-searchable-multiselect-select

  回复于 2024-04-26T16:53:19+08:00