Problema Necesitamos el componente de autocompletar Material-UI para poder mostrar y filtrar varias palabras separadas por caracteres especiales como '-' (guión) para cada opción de manera efectiva.

Ejemplo: la opción desplegable debe tener una cadena similar a, Nombre de usuario - Teléfono.

Probamos https://mui.com/material-ui/react-autocomplete/#search-input , pero en mi base de código, la acción de filtración no es precisa. Si usamos el número de teléfono en el campo de autocompletar para filtrar las opciones de autocompletar; no estamos obteniendo el resultado correcto filtrado.

Nota: los valores en el campo de opciones en el futuro incluirán nombres con caracteres especiales junto con números de teléfono separados por guiones.

Código :

 import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export default function ComboBox() { return ( <Autocomplete disablePortal id="combo-box-demo" options={Users} getOptionLabel={(Users) => Users.label +' - ' + Users.phone} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Users" />} /> ); } // Userslists const Users= [ { label: 'username1', phone: 912345121}, { label: 'username2', phone: 912345122}, { label: 'username3', phone: 212345676}, { label: 'username4', phone: 333223311}, { label: 'username5', phone: 777777232}, { label: 'username6', phone: 787873333}, ];

Todos los comentarios son bienvenidos :)