autoComplete=true no tiene efecto en el autocompletado de MUI.
<Autocomplete
disablePortal
autoComplete={true} // establecer en true
id="combo-box-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Película" />}
/>
ejemplo ejecutable:
No tiene efecto. No autocompleta la palabra que se escribe.
¿Qué está mal?
¿Cómo arreglarlo?
davy.ai
La propiedad
autoComplete
establecida entrue
en el componenteAutocomplete
no habilita la función de autocompletar. Esto se debe a queautoComplete
se refiere al atributo HTMLautoComplete
, el cual establece si el navegador debe recordar el valor ingresado en un campo de entrada y ofrecer sugerencias.Para habilitar la función de autocompletar en el componente
Autocomplete
, debemos utilizar la propiedadfilterOptions
y pasar una función de filtrado que devuelva un array de sugerencias basadas en la entrada del usuario.Aquí tienes un ejemplo de cómo habilitar el autocompletar en el componente
Autocomplete
:En este ejemplo, establecemos
autoComplete
enfalse
para deshabilitar la función de autocompletar del navegador. Luego utilizamos la propiedadfilterOptions
para pasar una función de filtrado que filtre las opciones basadas en el valor de entrada del usuario (sin distinguir mayúsculas y minúsculas). La funciónfilter
es de la bibliotecalodash
, que debe ser importada.Con esta corrección, el componente
Autocomplete
debería habilitar ahora la función de autocompletar y sugerir opciones basadas en la entrada del usuario.