Problem We need Material-UI autocomplete component to be able to display and filter multiple words separated by special characters like'-'(dash) for each option effectively.

Example: option dropdown must have string similar to, Username - Phone.

We have tried https://mui.com/material-ui/react-autocomplete/#search-input, but in my codebase, the filtration action is not accurate. If we use phone number instead in the autocomplete field to filter autocomplete options; we are not getting the right result filtered.

Note: values in option field in the future will include names with special characters in them along with phone number separated by dash.

Code:

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},
];

All comments are welcome :)