Autocomplete

Experimente ao vivo

Abrir Autocomplete no Lab →

O que é autocomplete local

Tanto select quanto autocomplete podem usar options locais. autocomplete adiciona busca interativa entre essas options. Para um autocomplete puramente local, defina options e não use optionsSource.

Exemplo básico

{name: 'salesRepresentative', label: 'Vendedor', type: 'autocomplete', options: [
  {value: 101, label: 'Alex Morgan'},
  {value: 102, label: 'Taylor Reed'},
  {value: 103, label: 'Jordan Lee'},
]}

label vs value

label é o que a pessoa vê e pesquisa. value é o que DYONA Form armazena em DyonaFormValues. Selecionar Taylor Reed produz {salesRepresentative: 102}, não {salesRepresentative: 'Taylor Reed'}.

Values suportados

Os values podem ser string, number ou boolean, e a comparação é estrita. {value: 1, label: 'North'} e {value: '1', label: 'Legacy North'} são diferentes.

Busca e texto livre

O usuário pode digitar para filtrar options locais pelo texto visível. autocomplete não é um campo de texto livre: uma opção válida deve ser selecionada. Texto sem seleção válida não se torna value do formulário.

Valor obrigatório ou opcional

null e "" representam ausência de seleção. Com required: true, uma seleção válida é exigida; consulte Validation.

Contrato de options locais

{label: string; value: string | number | boolean}

label deve ser um string não vazio. Values string devem ser não vazios e values number devem ser finitos.

defaultValue

defaultValue: 102 seleciona Taylor Reed quando existe exatamente value: 102. O tipo deve corresponder: 102 e '102' são distintos.

select vs autocomplete

Uso	select	autocomplete
Poucas opções	Bom	Bom
Buscar digitando	Não	Sim
Options locais	Sim	Sim
Texto livre	Não	Não
Resultado armazenado	option.value	option.value

Use select para listas curtas e autocomplete quando uma lista local maior se beneficia da busca.

Exemplo completo

{
  name: 'salesRepresentative',
  label: 'Vendedor',
  type: 'autocomplete',
  required: true,
  options: [{value: 102, label: 'Taylor Reed'}],
}
{
  name: 'customerSegment',
  label: 'Segmento comercial',
  type: 'autocomplete',
  required: true,
  options: [{value: 'enterprise', label: 'Empresarial'}],
}

Os valores enviados são:

{salesRepresentative: 102, customerSegment: 'enterprise'}

Próximos passos

• Fields
• Validation
• Conditions

O carregamento remoto de dados será tratado no próximo capítulo dedicado.