Skip to main content

Remote Multi Autocomplete

Try it live​

Open Remote Multi Autocomplete in the Lab →

multiautocomplete can load options remotely through optionsSource. It keeps the form value as an array of primitive option values while it searches, resolves, and displays the corresponding labels.

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

Search and initial values​

The field calls options.search after the configured minimum number of characters. For initial values that do not have a local option, it sends every unknown value in one options.resolveMany request:

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

The executor returns only the options it can resolve. Selected remote options remain available when a later search replaces the results. With more than maxVisibleChips selections, +N opens a searchable dialog where selections can be removed; readOnly allows consultation without removal and disabled does not open the dialog.

DummyJSON example​

The Lab searches DummyJSON with /users/search. Its options.resolveMany implementation makes one request to /users?limit=0&select=id,firstName,lastName,email, then filters that response by request.input.values; it does not request one user per ID.

See Remote Autocomplete for the single-selection variant and Multi Autocomplete for local multiple selection.