Pular para o conteúdo principal

Multi Autocomplete remoto

Testar ao vivo​

Abrir Multi Autocomplete remoto no Lab →

multiautocomplete pode carregar opções remotas por meio de optionsSource. O value do formulário continua sendo um array de valores primitivos enquanto o controle pesquisa, resolve e mostra os labels correspondentes.

{
  name: 'assignedUserIds',
  label: 'Usuários atribuídos',
  type: 'multiautocomplete',
  optionsSource: {
    sourceId: 'dummyjson-users',
    minSearchLength: 2,
  },
  maxVisibleChips: 4,
}

Pesquisa e valores iniciais​

O field chama options.search depois do número mínimo de caracteres configurado. Para values iniciais sem uma opção local, ele envia todos os valores desconhecidos em uma única request options.resolveMany:

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

O executor retorna apenas as opções que consegue resolver. As opções remotas selecionadas permanecem disponíveis mesmo quando uma pesquisa posterior substitui os resultados. Com mais seleções que maxVisibleChips, +N abre um diálogo pesquisável no qual as seleções podem ser removidas; readOnly permite consultar sem remover e disabled não abre o diálogo.

Exemplo com DummyJSON​

O Lab pesquisa no DummyJSON com /users/search. A implementação de options.resolveMany faz uma única request para /users?limit=0&select=id,firstName,lastName,email e então filtra a resposta por request.input.values; ela não faz uma request por ID.

Consulte Autocomplete remoto para a variante de seleção única e Multi Autocomplete para a seleção múltipla local.