Multiselect

Filtra como el autocomplete y guarda varias elecciones como chips. Intro o un clic marcan y desmarcan sin cerrar la lista; cada chip tiene su botón «Quitar» en el orden de tabulación, y Retroceso con el campo vacío quita el último. Cada cambio se anuncia con el recuento. Aquí hay que elegir entre 2 y 5.

Angular

Vue

Destinatarios del envío

Elegidos: ninguno

<flt-multiselect [options]="beneficiaries" label="Destinatarios del envío"
  [min]="2" [max]="5" [(value)]="chosen" />

<FltMultiselect v-model="chosen" :options="beneficiaries" label="Destinatarios del envío"
  :min="2" :max="5" />

Búsqueda en el servidor

El mismo contrato que el autocomplete: search a partir de 2 caracteres y 300 ms sin teclear, y options y loading de vuelta. Los chips conservan su nombre aunque la nueva búsqueda ya no los liste.

Angular

Vue

Destinatarios (búsqueda en el servidor)

Elegidos: 0

<flt-multiselect [options]="options()" [loading]="loading()" mode="server"
  label="Destinatarios" [(value)]="chosen" (search)="onSearch($event)" />

<FltMultiselect v-model="chosen" :options="options" :loading="loading" mode="server"
  label="Destinatarios" @search="onSearch" />