En el siguiente ejemplo, -
https://codesandbox.io/s/g5ucdj?file=/demo.tsx
Quiero lograr una funcionalidad tal que, si tengo una matriz,
const top100Films = [ { title: 'The Shawshank Redemption', year: 1994 }, { title: 'The Godfather', year: 1972 }, { title: 'The Godfather: Part II', year: 1994 },]Luego, en autocompletar cuando busco por año, debería obtener opciones de etiqueta para el título. P.ej. Si ingreso el año 1994 en el cuadro de búsqueda, debería obtener dos opciones de título para la selección:
The Shawshank Redemption The Godfather: Part IIIntenté cambiar la opción -
options={top100Films.map((option) => option.year)}Pero a través de esto, obtengo el año como una opción que quiero que el título sea una opción, con el año ingresado en el cuadro de texto.
Puedes usar MUI createFilterOptions
import { createFilterOptions } from '@mui/material/Autocomplete';Declarar filterOptions
const filterOptions = createFilterOptions({ matchFrom: 'any', stringify: (option) => option.year.toString(), //.toString because year is integer });Luego, en su etiqueta Autocompletar, agregue esto:
filterOptions={filterOptions}Ejemplo de Codesandbox.
El código está en javascript, puede cambiar a mecanografiado en consecuencia. Para mecanografiado siga este enlace
Como veo que está usando React js, le sugiero que use React-select para una mejor funcionalidad
Documentación de referencia: React-select npm https://react-select.com/home
Todo perfectamente documentado.