Autocomplete
Probalo en vivo
Abrir Autocomplete en el Lab →Qué es el autocomplete local
Tanto select como autocomplete pueden usar options locales. autocomplete agrega búsqueda interactiva entre esas options. Para un autocomplete puramente local se define options y no se usa optionsSource.
Ejemplo 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 es lo que la persona ve y busca. value es lo que DYONA Form guarda en DyonaFormValues. Elegir Taylor Reed produce {salesRepresentative: 102}, no {salesRepresentative: 'Taylor Reed'}.
Values admitidos
Los values pueden ser string, number o boolean, y la comparación es estricta. {value: 1, label: 'North'} y {value: '1', label: 'Legacy North'} son diferentes.
Búsqueda y texto libre
El usuario puede escribir para filtrar options locales por su texto visible. autocomplete no es un campo de texto libre: debe seleccionarse una opción válida. Un texto sin selección válida no se convierte en value del formulario.
Valor obligatorio u opcional
null y "" representan ausencia de selección. Con required: true se exige una selección válida; consultá Validation.
Contrato de options locales
{label: string; value: string | number | boolean}
label debe ser un string no vacío. Los values string deben ser no vacíos y los values number deben ser finitos.
defaultValue
defaultValue: 102 selecciona Taylor Reed si existe exactamente value: 102. El tipo debe coincidir: 102 y '102' son distintos.
select vs autocomplete
| Uso | select | autocomplete |
|---|---|---|
| Pocas opciones | Bueno | Bueno |
| Buscar escribiendo | No | Sí |
| Options locales | Sí | Sí |
| Texto libre | No | No |
| Resultado guardado | option.value | option.value |
Usá select para listas cortas y autocomplete cuando una lista local más larga se beneficia de la búsqueda.
Ejemplo 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: 'Empresa'}],
}
Los valores enviados son:
{salesRepresentative: 102, customerSegment: 'enterprise'}
Próximos pasos
La carga de datos remotos se cubre en el próximo capítulo dedicado.