是否有像 stackoverflow 中那样搜索/选择标签的 Material-UI 组件？

Question

我正在寻找类似的东西来在 ReactJS/Material-UI 中实现。任何现有的组件或库？

Answer 1

Autocomplete您可以通过覆盖下拉列表容器的组件来完成此操作，并将 CSS 网格设置为使用单位显示 3 个ListboxProps等宽列：Listboxfr

<Autocomplete
  ListboxProps={{
    style: {
      display: "grid",
      gridTemplateColumns: "1fr 1fr 1fr",
      maxHeight: "initial",
    }
  }}

现在假设该选项具有以下类型：

type TagOption = {
  tag: string;
  views: number;
  description: string;
};

在 Stackoverflow 下拉列表中，最多只有 6 个选项，因此我们需要限制显示的选项数量Listbox：

import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";

const _filterOptions = createFilterOptions<TagOption>();
const filterOption = (props, state) => {
  const results = _filterOptions(props, state);

  return results.slice(0, 6);
};

<Autocomplete filterOptions={filterOption}

我们还想为每个网格项创建一个自定义选项组件。这是一个最小的示例，没有任何太多的样式可以帮助您入门：

function OptionItem({ option, ...other }) {
  return (
    <li
      {...other}
      style={{
        display: "block"
      }}
    >
      <div>
        <Chip label={option.tag} />
        {option.views}
      </div>
      <div>{option.description}</div>
    </li>
  );
}

renderOption={(props, option, { selected }) => (
  <OptionItem {...props} option={option} />
)}

最后设置isOptionEqualToValue和getOptionLabel以确保选项得到正确过滤，并且输入在选择时显示正确的标签：

isOptionEqualToValue={(option, value) => option.tag === value.tag}
getOptionLabel={(option) => option.tag}

现场演示（来源）