/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete, {createFilterOptions} from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="free-solo-demo"
      freeSolo
      disableClearable
      filterOptions={filterOptions}
      options={top100Films}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      getOptionLabel={(option) => option.title}
      renderOption={(option) => (
        <React.Fragment>
          <table>
            {option.title==='title' ?(
            <thead>
              <tr>
                <th style={{ width: 400 }}>Name</th>
                <th style={{ width: 100 }}>Year</th>
              </tr>
            </thead>
            ):(
            <tbody>
              <tr>
                <td style={{ width: 400 }}>{option.title}</td>
                <td>{option.year}</td>
              </tr>
            </tbody>
            )}
          </table>
        </React.Fragment>
      )}
    />
  );
}

const filterOptions = createFilterOptions({
  matchFrom: 'any',
  stringify: (option) => option.title +  option.year,
  limit: 100,
});

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "title", year: 'year' },
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: "Pulp Fiction", year: 1994 },
  { title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { title: "The Good, the Bad and the Ugly", year: 1966 },
  { title: "Fight Club", year: 1999 },
  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },
  { title: "Forrest Gump", year: 1994 },
  { title: "Inception", year: 2010 },
  { title: "The Lord of the Rings: The Two Towers", year: 2002 },
  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { title: "Goodfellas", year: 1990 },
  { title: "The Matrix", year: 1999 },
  { title: "Seven Samurai", year: 1954 },
  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },
  { title: "City of God", year: 2002 },
  { title: "Se7en", year: 1995 },  
];

output click here

是的，你可以使用自动完成中的renderOption来完成。在我的例子中，我用了不同的方法来完成格式化。但是我认为你可以不费吹灰之力地将它转换成一个表格。

下面是代码

<Autocomplete
        variant="outlined"
        disablePortal
        isOptionEqualToValue={(option, value) =>
           option.prospectId === value.prospectId
          }
        id="prospectId"
        value={prospectId}
        inputValue={inputProspectId}
        onInputChange={(event, newInputValue) => {
        setInputProspectId(newInputValue);
        }}
        options={prospects}
        onChange={(event, newValue) => {
        setProspectId(newValue);
        }}
        getOptionLabel={(option) => option.prospectId || " "}
        renderOption={(props, option) => (
           <List {...props}>
             <ListItem>
                <ListItemText primary={"Prospect Id - " + option.prospectId}
                   secondary={"Description - " + option.description} />
             </ListItem>
           </List>
        )}
        renderInput={(params) => (
        <TextField
           {...params}
           label="Ref Prospect"
           fullWidth
           margin="normal"
           size="small"
        />
   )}/>