Multi Autocomplete remoto

Probarlo en vivo

Abrir Multi Autocomplete remoto en el Lab →

multiautocomplete puede cargar opciones remotas mediante optionsSource. El value del formulario sigue siendo un array de valores primitivos mientras el control busca, resuelve y muestra los labels correspondientes.

{
  name: 'assignedUserIds',
  label: 'Usuarios asignados',
  type: 'multiautocomplete',
  optionsSource: {
    sourceId: 'dummyjson-users',
    minSearchLength: 2,
  },
  maxVisibleChips: 4,
}

Búsqueda y valores iniciales

El field llama a options.search después de la cantidad mínima de caracteres configurada. Para values iniciales que no tienen una opción local, envía todos los valores desconocidos en una única request options.resolveMany:

{
  operation: 'options.resolveMany',
  input: {values: [1, 2, 3, 4, 5, 6]},
}

El executor devuelve únicamente las opciones que puede resolver. Las opciones remotas seleccionadas siguen disponibles aunque una búsqueda posterior reemplace los resultados. Con más selecciones que maxVisibleChips, +N abre un diálogo con búsqueda donde se pueden quitar selecciones; readOnly permite consultar sin quitar y disabled no abre el diálogo.

Ejemplo con DummyJSON

El Lab busca en DummyJSON mediante /users/search. La implementación de options.resolveMany hace una sola request a /users?limit=0&select=id,firstName,lastName,email y luego filtra esa respuesta por request.input.values; no hace una request por cada ID.

Consultá Autocomplete remoto para la variante de selección única y Multi Autocomplete para la selección múltiple local.